/* index page css */
        
        
        /* =========================================================
   JFINSERV HERO - CLEAN VERSION
   ========================================================= */

.jfinHero,
.jfinHero * {
    box-sizing: border-box;
}


/* =========================================================
   HERO
   ========================================================= */

.jfinHero {
    position: relative;

    width: 100%;
    height: 570px;

    overflow: hidden;

    margin: 0;
    padding: 0;

    background: #eef7ff;
}


/* =========================================================
   SLIDER
   ========================================================= */

.jfinHeroSlider {
    position: relative;

    width: 100%;
    height: 100%;
}


/* =========================================================
   SLIDE
   ========================================================= */

.jfinHeroSlide {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background-repeat: no-repeat;

    background-size: cover;
    background-position: center center;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .7s ease,
        visibility .7s ease;

    z-index: 1;
}


/* Active */

.jfinHeroSlideActive {
    opacity: 1;

    visibility: visible;

    z-index: 2;
}


/* =========================================================
   SLIDE IMAGE POSITIONS - DESKTOP
   ========================================================= */

.jfinHeroSlide:nth-child(1) {
    background-position: center center;
}

.jfinHeroSlide:nth-child(2) {
    background-position: right center;
}


/* =========================================================
   CONTENT
   ========================================================= */

.jfinHeroContent {
    position: relative;

    width: 100%;
    max-width: 1350px;

    height: 100%;

    margin: 0 auto;

    padding: 0 70px;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    z-index: 10;
}


/* =========================================================
   TEXT
   ========================================================= */

.jfinHeroText {
    position: relative;

    width: 52%;
    max-width: 650px;

    z-index: 20;
}


/* =========================================================
   LABEL
   ========================================================= */

.jfinHeroLabel {
    margin-bottom: 15px;

    color: #ed1c24;

    font-size: 13px;
    font-weight: 700;

    line-height: 1.3;

    letter-spacing: 4px;

    text-transform: uppercase;
}


/* =========================================================
   TITLE
   ========================================================= */

.jfinHeroTitle {
    margin: 0 0 18px;

    color: #295cab;

    font-size: 48px;
    font-weight: 800;

    line-height: 1.12;

    letter-spacing: -.5px;
}


.jfinHeroTitle span {
    color: #009fe3;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.jfinHeroDescription {
    max-width: 570px;

    margin: 0 0 28px;

    color: #333;

    font-size: 16px;

    line-height: 1.6;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.jfinHeroButtons {
    display: flex;

    align-items: center;

    gap: 12px;
}


.jfinHeroBtn {
    min-width: 130px;

    height: 48px;

    padding: 0 25px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 30px;

    font-size: 15px;
    font-weight: 700;

    text-decoration: none;

    transition: .25s ease;
}


/* Apply */

.jfinHeroApply {
    color: #fff;

    background: #2858d7;

    border: 2px solid #2858d7;

    box-shadow: 0 8px 20px rgba(40,88,215,.25);
}


/* Login */

.jfinHeroLogin {
    color: #fff;

    background: #ed1c24;

    border: 2px solid #ed1c24;

    box-shadow: 0 8px 20px rgba(237,28,36,.22);
}


/* =========================================================
   ARROWS
   ========================================================= */

.jfinHeroNavigation {
    position: absolute;

    right: 35px;
    bottom: 30px;

    display: flex;

    gap: 10px;

    z-index: 100;
}


.jfinHeroArrow {
    width: 48px;
    height: 48px;

    border: 0;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #444;

    background: rgba(255,255,255,.95);

    cursor: pointer;

    font-size: 15px;

    box-shadow: 0 5px 15px rgba(0,0,0,.12);
}

/* =========================================================
   JFINSERV HERO - MOBILE ONLY
   DESKTOP CSS WILL NOT CHANGE
   ========================================================= */

@media (max-width: 767px) {

    /* HERO */
   @media (max-width: 767px) {

    .jfinHero {
        margin-top: 0 !important;
        height: 225px !important;
        min-height: 225px !important;
    }

    .jfinHeroContent {
        padding-top: 12px !important;
    }

    .jfinHeroText {
        margin-top: 0 !important;
    }

    .jfinHeroLabel {
        margin-top: 0 !important;
    }

    .jfinHeroTitle {
        margin-top: 0 !important;
        transform: none !important;
        top: auto !important;
    }

}

    /* SLIDER */
    .jfinHeroSlider {
        width: 100% !important;
        height: 100% !important;
    }


    /* =====================================================
       IMAGE
       ===================================================== */

    .jfinHeroSlide {
        width: 100% !important;
        height: 100% !important;

        background-repeat: no-repeat !important;

        /*
         * Smaller image on mobile
         */
        background-size: auto 82% !important;

        background-position: right bottom !important;

        transform: none !important;
    }


    /* First banner */
    .jfinHeroSlide:nth-child(1) {
        background-size: auto 82% !important;
        background-position: right bottom !important;
    }


    /* Second banner */
    .jfinHeroSlide:nth-child(2) {
        background-size: auto 82% !important;
        background-position: right bottom !important;
    }


    /* =====================================================
       CONTENT
       ===================================================== */

    .jfinHeroContainer {
        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;

        padding: 14px 10px 8px 12px !important;

        display: flex !important;

        align-items: flex-start !important;
        justify-content: flex-start !important;

        position: relative !important;

        z-index: 10 !important;
    }


    /* =====================================================
       TEXT AREA
       ===================================================== */

    .jfinHeroContent {
        width: 55% !important;

        max-width: 205px !important;

        margin: 0 !important;
        padding: 0 !important;

        position: relative !important;

        z-index: 30 !important;
    }


    /* =====================================================
       LABEL
       ===================================================== */

    .jfinHeroLabel {
        margin: 0 0 5px 0 !important;
        padding: 0 !important;

        font-size: 7px !important;

        line-height: 1.2 !important;

        letter-spacing: 2px !important;

        white-space: nowrap !important;
    }


    /* =====================================================
       TITLE
       ===================================================== */

    .jfinHeroTitle {
        width: 100% !important;

        margin: 0 0 6px 0 !important;
        padding: 0 !important;

        font-size: 18px !important;

        line-height: 1.08 !important;

        letter-spacing: 0 !important;

        position: relative !important;

        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;

        transform: none !important;

        z-index: 40 !important;
    }


    .jfinHeroTitle span {
        color: #009fe3 !important;
    }


    /* =====================================================
       DESCRIPTION
       ===================================================== */

    .jfinHeroDescription {
        width: 100% !important;

        max-width: 200px !important;

        margin: 0 0 9px 0 !important;
        padding: 0 !important;

        font-size: 7.2px !important;

        line-height: 1.3 !important;

        position: relative !important;

        z-index: 40 !important;

        display: -webkit-box !important;

        -webkit-box-orient: vertical !important;

        -webkit-line-clamp: 3 !important;

        overflow: hidden !important;
    }


    /* =====================================================
       BUTTONS
       ===================================================== */

    .jfinHeroButtons {
        width: 100% !important;

        display: flex !important;

        align-items: center !important;

        gap: 7px !important;

        margin: 0 !important;
        padding: 0 !important;

        position: relative !important;

        z-index: 50 !important;
    }


    .jfinHeroButton {
        width: 88px !important;
        min-width: 88px !important;

        height: 39px !important;

        padding: 0 5px !important;

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        border-radius: 25px !important;

        font-size: 10.5px !important;

        white-space: nowrap !important;
    }


    /* =====================================================
       ARROWS
       ===================================================== */

    .jfinHeroNavigation {
        position: absolute !important;

        right: 8px !important;

        bottom: 8px !important;

        display: flex !important;

        gap: 7px !important;

        z-index: 100 !important;
    }


    .jfinHeroArrow {
        width: 36px !important;
        height: 36px !important;

        min-width: 36px !important;

        padding: 0 !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        font-size: 12px !important;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .jfinHero {
        height: 220px !important;
        min-height: 220px !important;
    }


    .jfinHeroSlide {
        /*
         * Keep person + phone smaller
         */
        background-size: auto 78% !important;

        background-position: right bottom !important;
    }


    .jfinHeroContainer {
        padding: 13px 9px 7px 11px !important;
    }


    .jfinHeroContent {
        width: 54% !important;
        max-width: 200px !important;
    }


    .jfinHeroTitle {
        font-size: 17px !important;
        line-height: 1.07 !important;
    }


    .jfinHeroDescription {
        font-size: 7px !important;

        max-width: 190px !important;

        line-height: 1.28 !important;
    }


    .jfinHeroButton {
        width: 86px !important;
        min-width: 86px !important;

        height: 38px !important;

        font-size: 10px !important;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .jfinHero {
        height: 215px !important;
        min-height: 215px !important;
    }


    .jfinHeroSlide {
        background-size: auto 75% !important;

        background-position: right bottom !important;
    }


    .jfinHeroContainer {
        padding: 12px 8px 7px 10px !important;
    }


    .jfinHeroContent {
        width: 55% !important;
    }


    .jfinHeroTitle {
        font-size: 16px !important;
    }


    .jfinHeroDescription {
        font-size: 6.8px !important;
    }


    .jfinHeroButton {
        width: 80px !important;
        min-width: 80px !important;

        height: 36px !important;

        font-size: 9.5px !important;
    }


    .jfinHeroNavigation {
        right: 7px !important;
        bottom: 7px !important;
    }


    .jfinHeroArrow {
        width: 33px !important;
        height: 33px !important;
    }

}
@media (max-width: 767px) {

    /* Give the text more horizontal space */
    .jfinHeroContent {
        width: 62% !important;
        max-width: 250px !important;
    }

    .jfinHeroText {
        width: 100% !important;
        max-width: 250px !important;
    }

    /* Don't break normal words */
    .jfinHeroTitle {
        width: 100% !important;

        font-size: 18px !important;
        line-height: 1.08 !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        white-space: normal !important;
    }

    .jfinHeroTitle span {
        display: inline !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    /* Description */
    .jfinHeroDescription {
        width: 100% !important;
        max-width: 230px !important;

        word-break: normal !important;
        overflow-wrap: normal !important;

        font-size: 7.5px !important;
        line-height: 1.35 !important;
    }

    /* Keep image on right */
    .jfinHeroSlide {
        background-size: auto 78% !important;
        background-position: right bottom !important;
    }

}


/* =====================================================
   480px
   ===================================================== */

@media (max-width: 480px) {

    .jfinHeroContent {
        width: 61% !important;
        max-width: 235px !important;
    }

    .jfinHeroText {
        width: 100% !important;
        max-width: 235px !important;
    }

    .jfinHeroTitle {
        font-size: 17px !important;
        line-height: 1.08 !important;
    }

    .jfinHeroDescription {
        max-width: 215px !important;
        font-size: 7px !important;
    }

}


/* =====================================================
   360px
   ===================================================== */

@media (max-width: 360px) {

    .jfinHeroContent {
        width: 60% !important;
        max-width: 215px !important;
    }

    .jfinHeroText {
        max-width: 215px !important;
    }

    .jfinHeroTitle {
        font-size: 16px !important;
    }

    .jfinHeroDescription {
        max-width: 195px !important;
        font-size: 6.8px !important;
    }

}
@media (max-width: 767px) {

    .jfinHeroContent {
        width: 64% !important;
        max-width: 255px !important;
    }

    .jfinHeroText {
        width: 100% !important;
        max-width: 255px !important;
    }

    .jfinHeroTitle {
        width: 100% !important;

        font-size: 18px !important;
        line-height: 1.08 !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .jfinHeroTitle span {
        display: inline !important;
        white-space: normal !important;
    }

}


/* SMALL MOBILE */

@media (max-width: 480px) {

    .jfinHeroContent {
        width: 64% !important;
        max-width: 240px !important;
    }

    .jfinHeroText {
        max-width: 240px !important;
    }

    .jfinHeroTitle {
        font-size: 17px !important;
    }

}


/* VERY SMALL MOBILE */

@media (max-width: 360px) {

    .jfinHeroContent {
        width: 63% !important;
        max-width: 225px !important;
    }

    .jfinHeroText {
        max-width: 225px !important;
    }

    .jfinHeroTitle {
        font-size: 16px !important;
    }

}@media (max-width: 767px) {

    .jfinHeroContent {
        width: 70% !important;
        max-width: 280px !important;
        flex: 0 0 70% !important;
    }

    .jfinHeroText {
        width: 100% !important;
        max-width: 280px !important;
    }

    .jfinHeroTitle {
        width: 250px !important;
        max-width: 250px !important;

        font-size: 18px !important;
        line-height: 1.08 !important;

        margin: 0 0 7px 0 !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        white-space: normal !important;
    }

    .jfinHeroTitle span {
        display: inline !important;
        white-space: normal !important;
        word-break: normal !important;
    }

    .jfinHeroDescription {
        width: 220px !important;
        max-width: 220px !important;

        font-size: 7.2px !important;
        line-height: 1.3 !important;
    }

    .jfinHeroButtons {
        gap: 7px !important;
    }

    .jfinHeroButton {
        width: 105px !important;
        min-width: 105px !important;
    }

    .jfinHeroSlide {
        background-size: auto 78% !important;
        background-position: right bottom !important;
    }
}


/* =========================================
   SMALL MOBILE
   ========================================= */

@media (max-width: 480px) {

    .jfinHeroContent {
        width: 69% !important;
        max-width: 260px !important;
    }

    .jfinHeroText {
        max-width: 260px !important;
    }

    .jfinHeroTitle {
        width: 235px !important;
        max-width: 235px !important;

        font-size: 17px !important;
    }

    .jfinHeroDescription {
        width: 205px !important;
        max-width: 205px !important;
    }

    .jfinHeroButton {
        width: 100px !important;
        min-width: 100px !important;
    }
}


/* =========================================
   360px MOBILE
   ========================================= */

@media (max-width: 360px) {

    .jfinHeroContent {
        width: 68% !important;
        max-width: 240px !important;
    }

    .jfinHeroTitle {
        width: 220px !important;
        max-width: 220px !important;

        font-size: 16px !important;
    }

    .jfinHeroDescription {
        width: 195px !important;
        max-width: 195px !important;
    }

    .jfinHeroButton {
        width: 92px !important;
        min-width: 92px !important;
    }
}
/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .jfinHero {
        height: 480px;
    }

    .jfinHeroContent {
        padding: 0 40px;
    }

    .jfinHeroText {
        width: 55%;
    }

    .jfinHeroTitle {
        font-size: 40px;
    }

    .jfinHeroDescription {
        font-size: 14px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .jfinHero {
        position: relative;

        width: 100%;

        /*
         * Banner starts normally.
         * No negative margin.
         * No transform.
         */
        height: 225px !important;
        min-height: 225px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
    }


    .jfinHeroSlider {
        width: 100%;
        height: 100%;
    }


    /* =====================================================
       MOBILE SLIDE
       ===================================================== */

    .jfinHeroSlide {
        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;

        /*
         * VERY IMPORTANT
         */
        background-size: auto 100% !important;

        background-repeat: no-repeat !important;

        background-position: right center !important;

        opacity: 0;

        visibility: hidden;

        transform: none !important;
    }


    .jfinHeroSlideActive {
        opacity: 1;

        visibility: visible;
    }


    /* Slide 1 */

    .jfinHeroSlide:nth-child(1) {
        background-position: right center !important;
    }


    /* Slide 2 */

    .jfinHeroSlide:nth-child(2) {
        background-position: right center !important;
    }


    /* =====================================================
       CONTENT
       ===================================================== */

    .jfinHeroContent {
        position: relative;

        width: 100%;
        height: 100%;

        margin: 0;
        padding: 16px 12px 10px !important;

        display: block !important;

        z-index: 10;
    }


    /* =====================================================
       TEXT AREA
       ===================================================== */

    .jfinHeroText {
        position: relative;

        width: 54% !important;

        max-width: 210px !important;

        margin: 0 !important;

        padding: 0 !important;

        z-index: 30;
    }


    /* =====================================================
       LABEL
       ===================================================== */

    .jfinHeroLabel {
        margin: 0 0 5px;

        color: #ed1c24;

        font-size: 7px;

        font-weight: 700;

        line-height: 1.25;

        letter-spacing: 2px;
    }


    /* =====================================================
       TITLE
       ===================================================== */

    .jfinHeroTitle {
        position: relative;

        margin: 0 0 6px;

        padding: 0;

        color: #295cab;

        font-size: 18px !important;

        font-weight: 800;

        line-height: 1.08 !important;

        letter-spacing: 0;

        /*
         * Prevent clipping
         */
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;

        transform: none !important;
    }


    .jfinHeroTitle span {
        color: #009fe3;
    }


    /* =====================================================
       DESCRIPTION
       ===================================================== */

    .jfinHeroDescription {
        width: 100%;

        max-width: 200px;

        margin: 0 0 10px;

        padding: 0;

        color: #333;

        font-size: 7.5px;

        line-height: 1.35;

        display: -webkit-box;

        -webkit-line-clamp: 3;

        -webkit-box-orient: vertical;

        overflow: hidden;
    }


    /* =====================================================
       BUTTONS
       ===================================================== */

    .jfinHeroButtons {
        display: flex;

        align-items: center;

        gap: 7px;

        margin: 0;

        padding: 0;

        position: relative;

        z-index: 40;
    }


    .jfinHeroBtn {
        width: 94px;

        min-width: 94px;

        height: 40px;

        padding: 0 5px;

        border-radius: 25px;

        font-size: 11px;

        white-space: nowrap;
    }


    /* =====================================================
       MOBILE ARROWS
       ===================================================== */

    .jfinHeroNavigation {
        position: absolute;

        right: 10px;

        bottom: 9px;

        display: flex;

        gap: 8px;

        z-index: 100;
    }


    .jfinHeroArrow {
        width: 38px;

        height: 38px;

        font-size: 12px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .jfinHero {
        height: 225px !important;
    }


    .jfinHeroContent {
        padding: 15px 12px 10px !important;
    }


    .jfinHeroText {
        width: 53% !important;
    }


    .jfinHeroTitle {
        font-size: 17px !important;
    }


    .jfinHeroDescription {
        font-size: 7.2px;

        max-width: 195px;
    }


    .jfinHeroBtn {
        width: 90px;

        min-width: 90px;

        height: 39px;

        font-size: 10.5px;
    }


    .jfinHeroArrow {
        width: 37px;

        height: 37px;
    }
}

/* =========================================
   MOBILE - FINANCIAL JOURNEY FIX
========================================= */

@media (max-width: 768px) {

    .financial-journey-section {
        width: 100%;
        padding: 25px 14px 40px !important;
        margin-top: 0 !important;
        box-sizing: border-box;
    }

    /* Remove any unwanted spacing before section */
    .financial-journey-section::before {
        display: none;
    }

    .financial-journey-section .section-header {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* About Company */
    .financial-journey-section .finserv-eyebrow {
        font-size: 16px;
        line-height: 1.4;
        margin: 0 0 8px !important;
    }

    /* Main heading */
    .financial-journey-section .finserv-trusted {
        font-size: 31px;
        line-height: 1.15;
        margin: 0 0 14px !important;
    }

    /* Description */
    .financial-journey-section .section-header p {
        font-size: 15px;
        line-height: 1.6;
        margin: 0 auto !important;
        max-width: 100%;
    }

    /* =========================================
       MOBILE IMAGE AREA
    ========================================= */

    .financial-journey-images {
        width: 100%;
        max-width: 100%;
        gap: 8px;
        margin: 35px auto 40px !important;
        padding: 0;
        box-sizing: border-box;
    }

    .journey-image {
        width: calc((100% - 16px) / 3);
        height: 145px;
        padding: 2px;
    }

    .journey-image-center {
        width: calc((100% - 16px) / 3);
        height: 145px;
    }

    .journey-image-left {
        transform: translateY(12px);
    }

    .journey-image-center {
        transform: translateY(-12px);
    }

}


/* =========================================================
   360px
   ========================================================= */

@media (max-width: 360px) {

    .jfinHero {
        height: 220px !important;
    }


    .jfinHeroContent {
        padding: 14px 10px 8px !important;
    }


    .jfinHeroText {
        width: 54% !important;
    }


    .jfinHeroTitle {
        font-size: 16px !important;
    }


    .jfinHeroDescription {
        font-size: 7px;

        -webkit-line-clamp: 3;
    }


    .jfinHeroBtn {
        width: 83px;

        min-width: 83px;

        height: 37px;

        font-size: 10px;
    }


    .jfinHeroNavigation {
        right: 8px;

        bottom: 8px;
    }


    .jfinHeroArrow {
        width: 34px;

        height: 34px;
    }
}
/* =====================================================
   FIX HEADER OVERLAPPING HERO
   ===================================================== */

@media (max-width: 767px) {

    .jfinHero {
        margin-top: 0 !important;
        height: 225px !important;
        min-height: 225px !important;
        padding: 0 !important;
    }

    .jfinHeroContent {
        padding-top: 12px !important;
    }

    .jfinHeroText {
        margin-top: 0 !important;
    }

    .jfinHeroLabel {
        margin-top: 0 !important;
    }

    .jfinHeroTitle {
        margin-top: 0 !important;
        transform: none !important;
        top: auto !important;
    }
}
/* =========================================
   SMALL MOBILE
   ========================================= */

@media (max-width: 480px) {

    .hero {
        height: 560px !important;
        min-height: 560px !important;
    }

    .hero .slide {
        height: 560px !important;
        min-height: 560px !important;

      
        background-position: right bottom !important;
    }

    .hero .hero-content {
        width: 65% !important;
        max-width: 65% !important;

        padding-top: 65px !important;
    }

    .hero .hero-content h1 {
        font-size: 23px !important;
    }

    .hero .hero-content p {
        font-size: 12px !important;
    }
}



/* =========================================================
   FINSERV FEATURE SECTION
   ========================================================= */

.finserv-wrapper {
    width: 100%;
    padding: 80px 20px;
    background: #ffffff;
    overflow: hidden;
}

.financial-services {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


        /* * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f8f9fc;
            color: #1a1a2e;
            line-height: 1.6;
        } */

        /* Header
        header {
            background: white;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            padding: 1rem 0;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        nav {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: 700;
            font-size: 1.5rem;
            color: #4c5fd7;
        }

        .logo span {
            color: #1a1a2e;
        }

        .nav-links {
            display: flex;
            gap: 2rem;
            list-style: none;
            align-items: center;
        }

        .nav-links a {
            text-decoration: none;
            color: #4a5568;
            font-weight: 500;
            transition: color 0.3s;
        }

        .nav-links a:hover {
            color: #4c5fd7;
        } */

            /* LOCALITIES SECTION ENHANCED */

.locality-card {
    background: linear-gradient(135deg, #ffffff, #f8f9ff);
    border-radius: 18px;
    padding: 1.8rem;
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

/* Hover Glow Effect */


.locality-card:hover::before {
    left: 100%;
}

.locality-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(76, 95, 215, 0.18);
}

/* LOCALITIES SECTION ENHANCED */

.locality-card {
    background: linear-gradient(135deg, #ffffff, #f8f9ff);
    border-radius: 18px;
    padding: 1.8rem;
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}



.locality-card:hover::before {
    left: 100%;
}

.locality-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(76, 95, 215, 0.18);
}
.mini-property {
    display: block;
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.mini-property:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.12);
}
.mini-property img {
    border-radius: 8px;
    transition: transform 0.4s ease;
}

.mini-property:hover img {
    transform: scale(1.08);
}
.mini-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a1a2e;
}

.mini-developer {
    color: #4c5fd7;
    font-size: 0.85rem;
}

.mini-location {
    font-size: 0.8rem;
    color: #888;
}

        .apply-btn {
            background: #4c5fd7;
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            border: none;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }

        .apply-btn:hover {
            background: #3d4ec7;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(76, 95, 215, 0.3);
        }

        /* Container */
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        /* Section Headers */
        .section-header {
            text-align: center;
            margin: 4rem 0 3rem;
        }
        .extra-property {
    display: none;
}

        .section-header h2 {
            font-size: 2.5rem;
            color: #295cab;
            margin-bottom: 0.5rem;
            font-weight: 700;
        }

        .section-header p {
            color: #295cab;
            font-size: 1.1rem;
        }

        /* Properties by Localities */
        .localities-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 2rem;
            margin-bottom: 4rem;
        }

        .locality-card {
            background: white;
            border-radius: 20px;
            padding: 2rem;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            transition: all 0.3s;
            text-align:center;
        }

        .locality-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(76, 95, 215, 0.12);
        }
        .localty-title{
        font-size: 1.6rem;
            color: #1a1a2e;
            margin-bottom: 1.5rem;
            font-weight: 700;
        }
        .properties-mini-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
        }
        .mini-property {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .mini-developer {
            font-size: 0.9rem;
            color: #4c5fd7;
            font-weight: 600;
            height: 1.2em;
            
        }

        .mini-property img {
            width: 100%;
            aspect-ratio: 16/10;
            object-fit: cover;
            border-radius: 4px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .mini-name {
            font-size: 0.95rem;
            color: #4a5568;
            font-weight: 500;
            line-height: 1.3;
            height: 2.6em;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .mini-location {
            font-size: 0.85rem;
            color: #9ca3af;
        }

        /* Enhanced Property Cards */
.properties-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

@media (max-width: 992px) {
    .properties-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .properties-grid {
        grid-template-columns: 1fr;
    }
}

        .property-card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 4px 24px rgba(0,0,0,0.08);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }

        .property-card:hover {
            transform: translateY(-12px) scale(1.02);
            box-shadow: 0 20px 60px rgba(76, 95, 215, 0.2);
        }

        .property-image-wrapper {
            position: relative;
            overflow: hidden;
            height: 260px;
        }
.featured-extra {
    display: none;
}
        .property-image-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }

        .property-card:hover .property-image-wrapper img {
            transform: scale(1.1);
        }

        .property-badge {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: rgba(76, 95, 215, 0.95);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            backdrop-filter: blur(10px);
            z-index: 2;
        }

        .featured-badge {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .property-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
            padding: 2rem 1.5rem 1rem;
            opacity: 0;
            transition: opacity 0.4s;
        }

        .property-card:hover .property-overlay {
            opacity: 1;
        }

        .quick-stats {
            display: flex;
            gap: 1rem;
            color: white;
            font-size: 0.9rem;
        }

        .stat-item {
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }

        .property-details {
            padding: 1.75rem;
        }

        .property-title {
            font-size: 1.35rem;
            color: #1a1a2e;
            margin-bottom: 0.75rem;
            font-weight: 700;
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .property-developer {
            color: #6b7280;
            font-size: 0.95rem;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .property-location {
            color: #9ca3af;
            font-size: 0.9rem;
            margin-bottom: 1.25rem;
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }

        .property-specs {
            display: flex;
            gap: 1.5rem;
            margin-bottom: 1.5rem;
            padding: 1rem;
            background: #f8f9fc;
            border-radius: 12px;
        }

        .spec-item {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .spec-label {
            font-size: 0.8rem;
            color: #9ca3af;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .spec-value {
            font-size: 1rem;
            color: #1a1a2e;
            font-weight: 600;
        }

        .property-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 1.25rem;
            border-top: 2px solid #f1f3f9;
        }

        .property-price {
            font-size: 1.75rem;
            color: #4c5fd7;
            font-weight: 700;
        }

        .contact-btn {
            background: linear-gradient(135deg, #4c5fd7 0%, #667eea 100%);
            color: white;
            padding: 0.875rem 1.75rem;
            border-radius: 12px;
            border: none;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.95rem;
        }

        .contact-btn:hover {
            transform: translateX(4px);
            box-shadow: 0 8px 20px rgba(76, 95, 215, 0.3);
        }

        /* Features Section */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 2rem;
            margin: 4rem 0;
        }

        .feature-card {
            background: white;
            padding: 2rem;
            border-radius: 16px;
            text-align: center;
            box-shadow: 0 4px 20px rgba(0,0,0,0.06);
            transition: all 0.3s;
        }

        .feature-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 40px rgba(76, 95, 215, 0.12);
        }

        .feature-icon {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, #e0e7ff 0%, #f0f4ff 100%);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            font-size: 2rem;
        }

        .feature-card h3 {
            color: #1a1a2e;
            margin-bottom: 1rem;
            font-size: 1.25rem;
        }

        .feature-card p {
            color: #6b7280;
            line-height: 1.7;
        }

        /* Services Section */




        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2rem;
            margin: 4rem 0;
        }

        .service-card {
            background: white;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            transition: all 0.3s;
        }

        .service-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 40px rgba(76, 95, 215, 0.15);
        }

        .service-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .service-content {
            padding: 2rem;
        }

        .service-content h3 {
            color: #4c5fd7;
            margin-bottom: 1rem;
            font-size: 1.35rem;
        }

        .service-content p {
            color: #6b7280;
            line-height: 1.8;
        }

        /* Testimonials */
        .testimonials {
            background: white;
            padding: 4rem 2rem;
            border-radius: 24px;
            margin: 4rem 0;
        }

        .testimonial-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .testimonial-card {
            background: #f8f9fc;
            padding: 2rem;
            border-radius: 16px;
            border-left: 4px solid #4c5fd7;
        }

        .testimonial-stars {
            color: #fbbf24;
            font-size: 1.2rem;
            margin-bottom: 1rem;
        }

        .testimonial-author {
            margin-top: 1.5rem;
            font-weight: 600;
            color: #1a1a2e;
        }

        .testimonial-role {
            color: #9ca3af;
            font-size: 0.9rem;
        }
        /* Search and Filter Section */
        .search-filter-section {
            background: white;
            padding: 2rem;
            border-radius: 20px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
            margin-bottom: 3rem;
            margin-top:2rem;
        }

        .search-bar-wrapper {
            display: flex;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .search-input-group {
            flex: 1;
            position: relative;
        }

        .search-input-group input {
            width: 100%;
            padding: 1rem 1rem 1rem 3rem;
            border: 2px solid #f1f3f9;
            border-radius: 12px;
            font-size: 1rem;
            transition: all 0.3s;
        }

        .search-input-group input:focus {
            border-color: #4c5fd7;
            outline: none;
            box-shadow: 0 0 0 4px rgba(76, 95, 215, 0.1);
        }

        .search-icon {
            position: absolute;
            left: 1.2rem;
            top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
        }

        .main-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            align-items: center;
        }

        .filter-group {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            min-width: 200px;
        }

        .filter-group label {
            font-size: 0.85rem;
            font-weight: 600;
            color: #4a5568;
        }

        .filter-select {
            padding: 0.75rem 1rem;
            border: 2px solid #f1f3f9;
            border-radius: 10px;
            background: white;
            color: #1a1a2e;
            font-size: 0.95rem;
            cursor: pointer;
            transition: all 0.3s;
        }

        .filter-select:hover {
            border-color: #cbd5e0;
        }

        .expand-filters-btn {
            background: #f8f9fc;
            color: #4c5fd7;
            border: none;
            margin-top:1.8rem;
            padding: 0.75rem 1.5rem;
            border-radius: 10px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.3s;
        }

        .expand-filters-btn:hover {
            background: #eef2ff;
        }

        .advanced-filters {
            display: none;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1.5rem;
            margin-top: 1.5rem;
            padding-top: 1.5rem;
            border-top: 1px solid #f1f3f9;
        }

        .advanced-filters.active {
            display: grid;
        }

        .filter-checkbox-group {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
        }

        .filter-chip {
            padding: 0.5rem 1rem;
            background: #f1f3f9;
            border-radius: 20px;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.3s;
            user-select: none;
        }

        .filter-chip.active {
            background: #4c5fd7;
            color: white;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }

            .section-header h2 {
                font-size: 2rem;
            }

         

            .property-specs {
                flex-direction: column;
                gap: 1rem;
            }
        }

        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .property-card {
            animation: fadeInUp 0.6s ease-out;
        }

        .property-card:nth-child(1) { animation-delay: 0.1s; }
        .property-card:nth-child(2) { animation-delay: 0.2s; }
        .property-card:nth-child(3) { animation-delay: 0.3s; }
        .property-card:nth-child(4) { animation-delay: 0.4s; }
      
        




/* HERO SEARCH BOX DESIGN */

.hero-search-wrapper {
    margin-top: -60px;
    position: relative;
    z-index: 5;
}

.hero-search-box {
    background: linear-gradient(135deg, #8fb0e8, #7aa0dd);
    padding: 25px 30px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.hero-search-top {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.hero-search-top input {
    flex: 1;
    padding: 12px 15px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
}

.hero-search-top button {
    background: #4c5fd7;
    color: white;
    border: none;
    padding: 0 25px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.hero-search-top button:hover {
    background: #3649c5;
}

.hero-search-filters {
    display: flex;
    gap: 15px;
}

.hero-search-filters select {
    flex: 1;
    padding: 10px 12px;
    border-radius: 6px;
    border: none;
    font-size: 13px;
}

@media (max-width:768px){
    .hero-search-top,
    .hero-search-filters{
        flex-direction: column;
    }
}


/* =========================================
   HERO BACKGROUND SEAMLESS FIX
   Do not change layout/design
   ========================================= */

.jfinHero {
    background: #effbff !important;
}

.jfinHeroSlider,
.jfinHeroSlide {
    background-color: #effbff !important;
}

/* Mobile */
@media (max-width: 767px) {
    .jfinHero {
        background: #effbff !important;
    }

    .jfinHeroSlider {
        background: #effbff !important;
    }

    .jfinHeroSlide {
        background-color: #effbff !important;
        background-position: right center !important;
    }
}

/* =========================================================
   FINAL MOBILE HERO - REMOVE WHITE PATCHES
   Keep existing design / text / buttons / person unchanged
   ========================================================= */

@media (max-width: 767px) {

    .jfinHero {
        background: #effbff !important;
        overflow: hidden !important;
    }

    .jfinHeroSlider {
        background: #effbff !important;
    }

    .jfinHeroSlide {
        width: 100% !important;
        height: 100% !important;

        background-repeat: no-repeat !important;

        /* Keep the person/image on right */
        background-size: auto 100% !important;
        background-position: right center !important;

        background-color: #effbff !important;
    }

    /*
     * Cover the image's white/uneven background
     * behind the text area only.
     */
  

    .jfinHeroContent {
        position: relative !important;
        z-index: 10 !important;
    }

    .jfinHeroText {
        position: relative !important;
        z-index: 20 !important;
    }
}


/* Small mobile */
@media (max-width: 480px) {

    .jfinHeroSlide {
        background-size: auto 100% !important;
        background-position: right center !important;
    }

    
}
/* =========================================
   FINAL MOBILE HERO FIX
   Image FULL + NO CUT
   ========================================= */

@media (max-width: 767px) {

    .jfinHero {
        width: 100% !important;
        height: 225px !important;
        min-height: 225px !important;
        overflow: hidden !important;
        background: #effbff !important;
    }

    .jfinHeroSlider {
        width: 100% !important;
        height: 100% !important;
        background: #effbff !important;
    }

    .jfinHeroSlide {
        position: absolute !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        background-repeat: no-repeat !important;

        /* IMPORTANT - don't cut image */
        background-size: auto 100% !important;
        background-position: right center !important;

        background-color: #effbff !important;

        opacity: 0;
        visibility: hidden;
    }

    .jfinHeroSlideActive {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .jfinHeroContent {
        position: relative !important;
        z-index: 10 !important;
    }

    .jfinHeroText {
        position: relative !important;
        z-index: 20 !important;
    }
}


/* 480px */
@media (max-width: 480px) {

    .jfinHero {
        height: 220px !important;
        min-height: 220px !important;
    }

    .jfinHeroSlide {
        background-size: auto 100% !important;
        background-position: right center !important;
    }
}


/* 360px */
@media (max-width: 360px) {

    .jfinHero {
        height: 215px !important;
        min-height: 215px !important;
    }

    .jfinHeroSlide {
        background-size: auto 100% !important;
        background-position: right center !important;
    }
}

/* Very small mobile */


/* =========================================================
   JFINMATE FEATURES SECTION
   Unique classes - will not affect existing sections
========================================================= */

.jfm-feature-section {
    width: 100%;
    position: relative;
    padding: 65px 0;
    background: #ffffff;
    overflow: hidden;
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.jfm-feature-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.jfm-feature-heading {
    width: 100%;
    max-width: 850px;
    margin: 0 auto 40px;
    text-align: center;
}


.jfm-feature-label {
    margin: 0 0 8px;

    color: #295cab;

    font-size: 16px;
    font-weight: 700;

    line-height: 1.4;
    margin-top:50px;
}


.jfm-feature-title {
    margin: 0 0 15px;

    color: #295cab;

    font-size: 36px;
    font-weight: 700;

    line-height: 1.2;
}


.jfm-feature-title strong {
    color: #00abeb;
    font-weight: 700;
}


.jfm-feature-description {
    margin: 0;

    color: #666666;

    font-size: 15px;
    font-weight: 400;

    line-height: 1.7;
}


/* =========================================================
   FEATURE GRID
========================================================= */

.jfm-feature-grid {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 28px;

    align-items: stretch;
}


/* =========================================================
   FEATURE CARD
========================================================= */

.jfm-feature-card {
    width: 100%;

    min-height: 188px;

    padding: 27px 20px 22px;

    background: #ffffff;

    border: 1px solid #c9dcf7;

    border-radius: 20px;

    box-shadow:
        0 3px 10px rgba(41, 92, 171, 0.07);

    display: flex;
    flex-direction: column;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


/* =========================================================
   CARD HOVER
========================================================= */

.jfm-feature-card:hover {
    transform: translateY(-4px);

    border-color: #295cab;

    box-shadow:
        0 8px 20px rgba(41, 92, 171, 0.14);
}


/* =========================================================
   FEATURE ICON
========================================================= */

.jfm-feature-icon {
    width: 37px;
    height: 37px;

    margin-bottom: 20px;

    background: #dce9fb;

    border-radius: 4px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}


.jfm-feature-icon i {
    color: #295cab;

    font-size: 18px;

    line-height: 1;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.jfm-feature-card-content {
    width: 100%;
}


.jfm-feature-card-content h3 {
    margin: 0 0 8px;

    color: #3d3d3d;

    font-size: 20px;
    font-weight: 700;

    line-height: 1.25;
}


.jfm-feature-card-content p {
    margin: 0;

    color: #666666;

    font-size: 13px;
    font-weight: 400;

    line-height: 1.4;
}


/* =========================================================
   LEARN MORE
========================================================= */

.jfm-feature-link {
    display: inline-block;

    margin-top: 13px;

    color: #295cab;

    font-size: 13px;
    font-weight: 600;

    line-height: 1.4;

    text-decoration: none;

    transition: color 0.3s ease;
}


.jfm-feature-link:hover {
    color: #00abeb;

    text-decoration: none;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .jfm-feature-section {
        padding: 55px 0;
    }


    .jfm-feature-container {
        padding: 0 18px;
    }


    .jfm-feature-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 20px;
    }


    .jfm-feature-title {
        font-size: 32px;
    }


    .jfm-feature-card {
        min-height: 190px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .jfm-feature-section {
        padding: 45px 0;
    }


    .jfm-feature-container {
        padding: 0 15px;
    }


    /* Heading */

    .jfm-feature-heading {
        margin-bottom: 30px;
    }


    .jfm-feature-label {
        margin-bottom: 7px;

        font-size: 14px;
    }


    .jfm-feature-title {
        margin-bottom: 12px;

        font-size: 27px;

        line-height: 1.25;
    }


    .jfm-feature-description {
        font-size: 14px;

        line-height: 1.6;
    }


    /* Cards */

    .jfm-feature-grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }


    .jfm-feature-card {
        min-height: auto;

        padding: 22px 18px;

        border-radius: 16px;
    }


    /* Icon */

    .jfm-feature-icon {
        width: 36px;
        height: 36px;

        margin-bottom: 16px;
    }


    .jfm-feature-icon i {
        font-size: 17px;
    }


    /* Card title */

    .jfm-feature-card-content h3 {
        margin-bottom: 8px;

        font-size: 19px;
    }


    /* Card description */

    .jfm-feature-card-content p {
        font-size: 13px;

        line-height: 1.5;
    }


    /* Link */

    .jfm-feature-link {
        margin-top: 12px;

        font-size: 13px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .jfm-feature-section {
        padding: 35px 0;
    }


    .jfm-feature-container {
        padding: 0 12px;
    }


    .jfm-feature-title {
        font-size: 24px;
    }


    .jfm-feature-description {
        font-size: 13px;

        line-height: 1.6;
    }


    .jfm-feature-card {
        padding: 20px 17px;

        border-radius: 15px;
    }


    .jfm-feature-card-content h3 {
        font-size: 18px;
    }


    .jfm-feature-card-content p {
        font-size: 13px;

        line-height: 1.5;
    }

}


/* =========================================================
   EXTRA SMALL DEVICES
========================================================= */

@media (max-width: 360px) {

    .jfm-feature-container {
        padding: 0 10px;
    }


    .jfm-feature-title {
        font-size: 22px;
    }


    .jfm-feature-card {
        padding: 18px 15px;
    }


    .jfm-feature-card-content h3 {
        font-size: 17px;
    }

}


/* =========================================================
   JFINMATE LOAN PRODUCTS
   SAME UNIQUE CLASS NAMES
========================================================= */

.jfm-products-section {
    width: 100%;
    padding: 55px 0 65px;
    background: #ffffff;
    position: relative;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
}


/* =========================================================
   CONTAINER
========================================================= */

.jfm-products-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.jfm-products-header {
    width: 100%;
    text-align: center;
    margin: 0 auto 35px;
}


.jfm-products-title {
    margin: 0 0 8px;

    color: #295cab;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 34px;
    font-weight: 700;

    line-height: 1.25;
}


.jfm-products-title strong {
    color: #00abeb;
    font-weight: 700;
}


.jfm-products-subtitle {
    margin: 0;

    color: #666666;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 400;

    line-height: 1.5;
}


/* =========================================================
   PRODUCTS GRID
========================================================= */

.jfm-products-grid {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    column-gap: 28px;
    row-gap: 55px;

    align-items: start;
}


/* =========================================================
   PRODUCT LINK
========================================================= */

.jfm-product-link {
    display: block;

    width: 100%;

    color: inherit;

    text-decoration: none;

    box-sizing: border-box;
}


.jfm-product-link:hover {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.jfm-product-card {
    width: 100%;

    background: transparent;

    border: none;

    box-sizing: border-box;

    transition: transform 0.3s ease;
}


.jfm-product-card:hover {
    transform: translateY(-3px);
}


/* =========================================================
   PRODUCT IMAGE CONTAINER
========================================================= */

.jfm-product-image {
    width: 100%;

    height: 190px;

    overflow: hidden;

    border-radius: 8px;

    background: #f3f3f3;

    margin: 0 0 8px;

    position: relative;

    box-sizing: border-box;
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.jfm-product-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center center;

    border: 0;

    margin: 0;
    padding: 0;

    transition: transform 0.4s ease;
}


/* =========================================================
   IMAGE HOVER
========================================================= */

.jfm-product-card:hover .jfm-product-image img {
    transform: scale(1.03);
}


/* =========================================================
   PRODUCT CONTENT
========================================================= */

.jfm-product-content {
    width: 100%;

    padding: 0 12px;

    box-sizing: border-box;
}


/* =========================================================
   PRODUCT TITLE
========================================================= */

.jfm-product-content h3 {
    margin: 0 0 5px;

    color: #333333;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 16px;
    font-weight: 700;

    line-height: 1.35;
}


/* =========================================================
   PRODUCT DESCRIPTION
========================================================= */

.jfm-product-content p {
    margin: 0;

    color: #666666;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;
    font-weight: 400;

    line-height: 1.4;

    min-height: 45px;
}


/* =========================================================
   LEARN MORE
========================================================= */

.jfm-product-readmore {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-top: 10px;

    color: #295cab;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;
    font-weight: 600;

    line-height: 1.3;

    text-decoration: none;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


.jfm-product-arrow {
    display: inline-block;

    font-size: 15px;

    line-height: 1;

    transition: transform 0.3s ease;
}


.jfm-product-link:hover .jfm-product-readmore {
    color: #00abeb;
}


.jfm-product-link:hover .jfm-product-arrow {
    transform: translateX(4px);
}


/* =========================================================
   VIEW ALL SERVICES BUTTON
========================================================= */

.jfm-products-cta {
    width: 100%;

    text-align: center;

    margin-top: 45px;
}


.jfm-products-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 11px 25px;

    background:#1e4fd8;

    color: #ffffff;

    border: 1px solid #295cab;

    border-radius: 22px;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.4;

    text-decoration: none;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


.jfm-products-button:hover {
    background: #00abeb;

    border-color: #00abeb;

    color: #ffffff;

    text-decoration: none;

    transform: translateY(-2px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .jfm-products-section {
        padding: 50px 0 60px;
    }


    .jfm-products-container {
        padding: 0 18px;
    }


    .jfm-products-header {
        margin-bottom: 32px;
    }


    .jfm-products-title {
        font-size: 31px;
    }


    .jfm-products-subtitle {
        font-size: 14px;
    }


    .jfm-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        column-gap: 22px;
        row-gap: 42px;
    }


    .jfm-product-image {
        height: 190px;
    }


    .jfm-product-content {
        padding: 0 8px;
    }


    .jfm-product-content h3 {
        font-size: 16px;
    }


    .jfm-product-content p {
        font-size: 15px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .jfm-products-section {
        padding: 40px 0 50px;
    }


    .jfm-products-container {
        padding: 0 15px;
    }


    /* Header */

    .jfm-products-header {
        margin-bottom: 28px;
    }


    .jfm-products-title {
        font-size: 27px;

        line-height: 1.25;
    }


    .jfm-products-subtitle {
        font-size: 14px;

        line-height: 1.5;
    }


    /* Grid */

    .jfm-products-grid {
        grid-template-columns: 1fr;

        column-gap: 0;

        row-gap: 35px;
    }


    /* Image */

    .jfm-product-image {
        width: 100%;

        height: 210px;

        border-radius: 8px;

        margin-bottom: 10px;
    }


    /* Image */

    .jfm-product-image img {
        width: 100%;
        height: 100%;

        object-fit: cover;

        object-position: center center;
    }


    /* Content */

    .jfm-product-content {
        width: 100%;

        padding: 0 5px;
    }


    .jfm-product-content h3 {
        font-size: 18px;

        line-height: 1.35;

        margin-bottom: 6px;
    }


    .jfm-product-content p {
        font-size: 13px;

        line-height: 1.5;

        min-height: auto;
    }


    /* Learn More */

    .jfm-product-readmore {
        margin-top: 10px;

        font-size: 13px;
    }


    .jfm-product-arrow {
        font-size: 16px;
    }


    /* Button */

    .jfm-products-cta {
        margin-top: 35px;
    }


    .jfm-products-button {
        padding: 10px 22px;

        font-size: 13px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .jfm-products-section {
        padding: 35px 0 45px;
    }


    .jfm-products-container {
        padding: 0 12px;
    }


    .jfm-products-header {
        margin-bottom: 25px;
    }


    .jfm-products-title {
        font-size: 24px;
    }


    .jfm-products-subtitle {
        font-size: 13px;

        line-height: 1.5;
    }


    .jfm-products-grid {
        row-gap: 30px;
    }


    .jfm-product-image {
        height: 200px;

        border-radius: 7px;
    }


    .jfm-product-content {
        padding: 0 3px;
    }


    .jfm-product-content h3 {
        font-size: 17px;

        line-height: 1.35;
    }


    .jfm-product-content p {
        font-size: 12px;

        line-height: 1.5;
    }


    .jfm-product-readmore {
        font-size: 12px;

        margin-top: 9px;
    }


    .jfm-products-cta {
        margin-top: 30px;
    }


    .jfm-products-button {
        padding: 10px 20px;

        font-size: 13px;
    }

}


/* =========================================================
   EXTRA SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .jfm-products-section {
        padding: 30px 0 40px;
    }


    .jfm-products-container {
        padding: 0 10px;
    }


    .jfm-products-title {
        font-size: 22px;
    }


    .jfm-products-subtitle {
        font-size: 12px;
    }


    .jfm-product-image {
        height: 185px;
    }


    .jfm-product-content h3 {
        font-size: 16px;
    }


    .jfm-product-content p {
        font-size: 12px;

        line-height: 1.5;
    }


    .jfm-product-readmore {
        font-size: 12px;
    }

}


    /* =========================================================
   JFINMATE LENDING PARTNERS
   UNIQUE CLASS NAMES
========================================================= */

.jfm-lenders-section {
    width: 100%;
    background: #dce9fe;
    padding: 0;
    overflow: hidden;
}


/* =========================================================
   HEADING
========================================================= */

.jfm-lenders-heading {
    width: 100%;
    text-align: center;

    padding: 25px 15px 20px;

    background: #ffffff;

    border-bottom: 1px solid #eeeeee;
}


.jfm-lenders-heading h2 {
    margin: 0;

    color: #444444;

    font-size: 18px;
    font-weight: 700;

    line-height: 1.3;
}


/* =========================================================
   SLIDER WRAPPER — MORE LEFT & RIGHT SPACE (INCREASED AGAIN)
========================================================= */

.jfm-lenders-slider-wrapper {
    width: 100%;

    /* ← MORE LEFT & RIGHT SPACE (increased further) */
    padding: 0 200px;

    box-sizing: border-box;
}


/* =========================================================
   SLIDER (full width inside the padded wrapper)
========================================================= */

.jfm-lenders-slider {
    width: 100%;

    overflow: hidden;

    background: #dce9fe;

    border-bottom: 1px solid #eeeeee;

    position: relative;

    padding: 0;
}


/* =========================================================
   SLIDER TRACK
========================================================= */

.jfm-lenders-track {
    width: max-content;

    display: flex;

    align-items: center;

    animation: jfmLenderSlide 25s linear infinite;
}


/* =========================================================
   LOGO ITEM
========================================================= */

.jfm-lender-logo {
    width: 180px;
    height: 75px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 12px 20px;
}


/* =========================================================
   LOGO IMAGE
========================================================= */

.jfm-lender-logo img {
    max-width: 135px;
    max-height: 45px;

    width: auto;
    height: auto;

    display: block;

    object-fit: contain;

    transition: transform 0.3s ease;
}


/* =========================================================
   LOGO HOVER
========================================================= */

.jfm-lender-logo:hover img {
    transform: scale(1.05);
}


/* =========================================================
   SLIDER ANIMATION
========================================================= */

@keyframes jfmLenderSlide {

    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

}


/* =========================================================
   PAUSE ON HOVER
========================================================= */

.jfm-lenders-slider:hover .jfm-lenders-track {
    animation-play-state: paused;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .jfm-lenders-heading {
        padding: 22px 15px 17px;
    }


    .jfm-lenders-heading h2 {
        font-size: 17px;
    }


    /* ← MORE LEFT & RIGHT SPACE (tablet) */
    .jfm-lenders-slider-wrapper {
        padding: 0 120px;
    }


    .jfm-lender-logo {
        width: 165px;
        height: 70px;

        padding: 10px 18px;
    }


    .jfm-lender-logo img {
        max-width: 125px;
        max-height: 42px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .jfm-lenders-heading {
        padding: 20px 12px 16px;
    }


    .jfm-lenders-heading h2 {
        font-size: 16px;
    }


    /* ← MORE LEFT & RIGHT SPACE (mobile) */
    .jfm-lenders-slider-wrapper {
        padding: 0 60px;
    }


    .jfm-lender-logo {
        width: 145px;
        height: 65px;

        padding: 9px 15px;
    }


    .jfm-lender-logo img {
        max-width: 115px;
        max-height: 38px;
    }


    .jfm-lenders-track {
        animation-duration: 20s;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .jfm-lenders-heading {
        padding: 18px 10px 14px;
    }


    .jfm-lenders-heading h2 {
        font-size: 15px;
    }


    /* ← MORE LEFT & RIGHT SPACE (small mobile) */
    .jfm-lenders-slider-wrapper {
        padding: 0 40px;
    }


    .jfm-lender-logo {
        width: 130px;
        height: 60px;

        padding: 8px 12px;
    }


    .jfm-lender-logo img {
        max-width: 105px;
        max-height: 35px;
    }


    .jfm-lenders-track {
        animation-duration: 18s;
    }

}



/* ==========================================
   ALL PROPERTIES SECTION — PRO UI
========================================== */

.all-properties-section {
    padding: 80px 0 90px;
    background: #ffffff;
    position: relative;
}


/* ==========================================
   CONTAINER — INCREASED LEFT & RIGHT SPACE
========================================== */

.all-properties-section .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 60px;   /* ← increased side space (was ~24px) */
}


/* ==========================================
   SECTION HEADER
========================================== */

.properties-section-header {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}


.properties-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 6px 16px;
    background: #eef4ff;
    border: 1px solid #d9e5fb;
    border-radius: 40px;
    color: #295cab;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
}


.properties-section-header h2 {
    margin: 0 0 16px;
    color: #1e2a41;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.02em;
}


.properties-section-header h2 strong {
    color: #00abeb;
    font-weight: 700;
}


.properties-section-header p {
    max-width: 640px;
    margin: 0 auto;
    color: #6c7480;
    font-size: 15px;
    line-height: 1.75;
}


/* ==========================================
   PROPERTY GRID
========================================== */

.properties-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}


/* ==========================================
   PROPERTY CARD
========================================== */

.property-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e9edf3;
    border-radius: 18px;
    box-shadow: 0 4px 20px rgba(24, 55, 90, 0.05);
    transition:
        transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1),
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}


.property-card:hover {
    transform: translateY(-8px);
    border-color: #d9e5fb;
    box-shadow:
        0 24px 45px -12px rgba(24, 55, 90, 0.18),
        0 0 0 1px rgba(0, 171, 235, 0.05);
}


/* ==========================================
   PROPERTY IMAGE
========================================== */

.property-image-wrapper {
    position: relative;
    width: 100%;
    height: 245px;
    overflow: hidden;
    background: #f1f3f6;
}


.property-image-wrapper img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}


.property-card:hover .property-image-wrapper img {
    transform: scale(1.07);
}


/* ==========================================
   STATUS BADGE
========================================== */

.property-status-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 40px;
    box-shadow: 0 6px 18px rgba(15, 40, 80, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    white-space: nowrap;
}


.status-dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    background: #18b76a;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(24, 183, 106, 0.15);
    animation: pulse-dot 2s infinite;
}


@keyframes pulse-dot {
    0%   { box-shadow: 0 0 0 0 rgba(24, 183, 106, 0.35); }
    70%  { box-shadow: 0 0 0 6px rgba(24, 183, 106, 0); }
    100% { box-shadow: 0 0 0 0 rgba(24, 183, 106, 0); }
}


.status-text {
    color: #1e3a8a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.2;
}


/* ==========================================
   IMAGE OVERLAY
========================================== */

.property-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 50px 16px 16px;
    background: linear-gradient(
        to top,
        rgba(10, 25, 50, 0.85) 0%,
        rgba(10, 25, 50, 0.45) 45%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
}


.property-card:hover .property-overlay {
    opacity: 1;
}


.quick-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}


.stat-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 40px;
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 500;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}


.stat-item i {
    color: #00c3ff;
    font-size: 11px;
}


/* ==========================================
   PROPERTY DETAILS
========================================== */

.property-details {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 22px 22px;
}


/* ==========================================
   TITLE / BUNGALOW NAME
========================================== */

.property-title {
    min-height: 50px;
    margin: 0 0 12px;
    color: #1e2a41;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -0.01em;
    transition: color 0.3s ease;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.property-card:hover .property-title {
    color: #295cab;
}


/* ==========================================
   DEVELOPER
========================================== */

.property-developer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: #5e6a7a;
    font-size: 13px;
}


.property-developer i {
    width: 16px;
    color: #295cab;
    font-size: 13px;
    text-align: center;
}


/* ==========================================
   SPECS ROW — Configuration · Location · Area
========================================== */

.property-specs {
    display: flex;
    align-items: stretch;
    width: 100%;
    margin-top: auto;
    padding: 15px 0;
    border-top: 1px solid #edf0f4;
    border-bottom: 1px solid #edf0f4;
}


.spec-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}


.spec-label {
    color: #89919c;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}


.spec-value {
    color: #253858;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    word-break: break-word;
}


.spec-value.spec-location {
    font-weight: 600;
    color: #35485c;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.spec-divider {
    width: 1px;
    height: auto;
    min-height: 34px;
    margin: 0 16px;
    background: #e5e8ed;
    flex-shrink: 0;
}


/* ==========================================
   FOOTER
========================================== */

.property-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 18px;
}


/* ==========================================
   PRICE
========================================== */

.property-price {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}


.price-label {
    color: #9299a2;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}


.property-price strong {
    color: #295cab;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}


/* ==========================================
   VIEW DETAILS BUTTON
========================================== */

.contact-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    background: #295cab;
    color: #ffffff !important;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: 0 6px 16px -4px rgba(41, 92, 171, 0.35);
    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.contact-btn:hover {
    background: #00abeb;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -6px rgba(0, 171, 235, 0.5);
}


.contact-btn i {
    font-size: 10px;
    transition: transform 0.3s ease;
}


.contact-btn:hover i {
    transform: translateX(3px);
}


/* ==========================================
   VIEW ALL
========================================== */

.properties-view-all {
    margin-top: 55px;
    text-align: center;
}


.view-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 34px;
    background: #1e4fd8;
    color: #ffffff !important;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: 0 10px 24px -8px rgba(30, 79, 216, 0.45);
    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.view-all-btn:hover {
    background: #00abeb;
    color: #ffffff !important;
    transform: translateY(-3px);
    box-shadow: 0 16px 30px -8px rgba(0, 171, 235, 0.55);
}


.view-all-btn i {
    font-size: 12px;
    transition: transform 0.3s ease;
}


.view-all-btn:hover i {
    transform: translateX(4px);
}


/* ==========================================
   NO PROPERTY
========================================== */

.no-properties {
    padding: 70px 24px;
    text-align: center;
    border: 1px solid #edf0f4;
    border-radius: 20px;
    background: #fafcff;
}


.no-properties-icon {
    margin-bottom: 18px;
    color: #295cab;
    font-size: 46px;
    opacity: 0.8;
}


.no-properties h3 {
    margin: 0 0 10px;
    color: #253858;
    font-size: 24px;
    font-weight: 700;
}


.no-properties p {
    max-width: 420px;
    margin: 0 auto;
    color: #777f89;
    font-size: 14px;
    line-height: 1.6;
}


/* ==========================================
   EXTRA PROPERTY
========================================== */

.extra-property {
    display: none;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 991px) {

    .all-properties-section {
        padding: 60px 0 70px;
    }


    .all-properties-section .container {
        padding: 0 40px;   /* ← increased side space (tablet) */
    }


    .properties-section-header {
        margin-bottom: 45px;
    }


    .properties-section-header h2 {
        font-size: 34px;
    }


    .properties-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }


    .property-image-wrapper {
        height: 225px;
    }


    .spec-divider {
        margin: 0 12px;
    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) {

    .all-properties-section {
        padding: 50px 0 60px;
    }


    .all-properties-section .container {
        padding: 0 28px;   /* ← increased side space (mobile) */
    }


    .properties-section-header {
        margin-bottom: 35px;
    }


    .properties-eyebrow {
        font-size: 10px;
        letter-spacing: 1.2px;
        padding: 5px 13px;
    }


    .properties-section-header h2 {
        font-size: 28px;
        line-height: 1.25;
    }


    .properties-section-header p {
        padding: 0 8px;
        font-size: 13px;
        line-height: 1.65;
    }


    .properties-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }


    .property-image-wrapper {
        height: 235px;
    }


    .property-details {
        padding: 20px 18px 20px;
    }


    .property-title {
        min-height: auto;
        font-size: 19px;
    }


    .property-status-badge {
        top: 13px;
        left: 13px;
        padding: 6px 11px;
        gap: 6px;
    }


    .status-dot {
        width: 6px;
        height: 6px;
    }


    .status-text {
        font-size: 10.5px;
    }


    .property-overlay {
        opacity: 1;
        padding: 45px 14px 14px;
    }


    .stat-item {
        padding: 5px 10px;
        font-size: 11px;
    }


    .property-footer {
        align-items: flex-end;
    }


    .property-price strong {
        font-size: 15px;
    }


    .contact-btn {
        padding: 10px 16px;
        font-size: 11.5px;
    }


    .properties-view-all {
        margin-top: 40px;
    }


    .view-all-btn {
        padding: 13px 28px;
        font-size: 13px;
    }


    .spec-divider {
        margin: 0 10px;
    }


    .spec-label {
        font-size: 9px;
    }


    .spec-value {
        font-size: 12px;
    }

}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 480px) {

    .all-properties-section .container {
        padding: 0 20px;   /* ← increased side space (small mobile) */
    }


    .properties-section-header h2 {
        font-size: 24px;
    }


    .properties-section-header p {
        font-size: 12px;
    }


    .property-image-wrapper {
        height: 215px;
    }


    .property-details {
        padding: 18px 16px;
    }


    .property-footer {
        gap: 8px;
    }


    .property-price {
        max-width: 58%;
    }


    .property-price strong {
        font-size: 13.5px;
        white-space: normal;
    }


    .contact-btn span {
        display: none;
    }


    .contact-btn {
        width: 42px;
        height: 40px;
        padding: 0;
        border-radius: 10px;
    }


    .contact-btn i {
        font-size: 13px;
    }


    .spec-item {
        gap: 3px;
    }


    .spec-divider {
        margin: 0 8px;
        min-height: 28px;
    }


    .spec-label {
        font-size: 8.5px;
        letter-spacing: 0.4px;
    }


    .spec-value {
        font-size: 11px;
    }

}





/* Container — increased left & right space more */
.testimonials .container-tab {
    padding-left: 320px;
    padding-right: 320px;
}


/* Tablet */
@media (max-width: 991px) {

    .testimonials .container-tab {
        padding-left: 180px;
        padding-right: 180px;
    }

}


/* Mobile */
@media (max-width: 767px) {

    .testimonials .container-tab {
        padding-left: 70px;
        padding-right: 70px;
    }

}


/* Small Mobile */
@media (max-width: 480px) {

    .testimonials .container-tab {
        padding-left: 45px;
        padding-right: 45px;
    }

}


/* =========================================================
   JFINMATE FOUR STEP LOAN PROCESS
   UNIQUE CLASS NAMES
========================================================= */

.jfm-loan-process {
    width: 100%;

    position: relative;

    padding: 45px 0 55px;

    background: #2b63ad;

    overflow: hidden;

    font-family: Arial, Helvetica, sans-serif;
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.jfm-process-container {
    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 35px;

    position: relative;

    z-index: 2;

    box-sizing: border-box;
}


/* =========================================================
   BACKGROUND DOT PATTERN
========================================================= */

.jfm-process-dot-pattern {
    position: absolute;

    top: -40px;
    right: -20px;

    width: 320px;
    height: 320px;

    background-image: radial-gradient(
        rgba(255, 255, 255, 0.35) 1.5px,
        transparent 1.5px
    );

    background-size: 10px 10px;

    opacity: 0.65;

    pointer-events: none;
}


/* =========================================================
   BACKGROUND CIRCLE
========================================================= */

.jfm-process-circle-pattern {
    position: absolute;

    left: -160px;
    bottom: -180px;

    width: 420px;
    height: 420px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   HEADING
========================================================= */

.jfm-process-heading {
    width: 100%;

    text-align: center;

    margin-bottom: 48px;

    position: relative;
}


.jfm-process-heading h2 {
    margin: 0;

    color: #ffffff;

    font-size: 27px;

    font-weight: 700;

    line-height: 1.3;

    letter-spacing: 0.2px;
}


.jfm-process-heading h2 span {
    color: #ffffff;

    margin: 0 5px;
}


/* =========================================================
   PROCESS WRAPPER
========================================================= */

.jfm-process-wrapper {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 28px;

    position: relative;

    align-items: start;
}


/* =========================================================
   STEP
========================================================= */

.jfm-process-step {
    width: 100%;

    position: relative;

    padding-top: 87px;

    box-sizing: border-box;
}


/* =========================================================
   NUMBER CIRCLE
========================================================= */

.jfm-process-number {
    width: 46px;
    height: 46px;

    position: absolute;

    top: -2px;
    left: 50%;

    transform: translateX(-50%);

    z-index: 5;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid #ffffff;

    border-radius: 50%;

    color: #ffffff;

    font-size: 19px;

    font-weight: 400;

    background: #2b63ad;

    box-sizing: border-box;
}


/* =========================================================
   CONNECTING LINE
========================================================= */

.jfm-process-line {
    position: absolute;

    top: 20px;

    left: calc(50% + 23px);

    width: calc(100% + 5px);

    height: 5px;

    display: flex;

    align-items: center;

    z-index: 1;

    pointer-events: none;
}


/* =========================================================
   DASHES
========================================================= */

.jfm-process-dash {
    display: block;

    flex: 1;

    height: 2px;

    background: repeating-linear-gradient(
        to right,
        #ffffff 0,
        #ffffff 15px,
        transparent 15px,
        transparent 30px
    );

    opacity: 0.9;
}


/* =========================================================
   ARROW
========================================================= */

.jfm-process-arrow {
    color: #ffffff;

    font-size: 30px;

    font-weight: 300;

    line-height: 1;

    margin: 0 7px;

    transform: translateY(-1px);
}


/* =========================================================
   LAST STEP - NO LINE
========================================================= */

.jfm-process-step:last-child .jfm-process-line {
    display: none;
}


/* =========================================================
   PROCESS CARD
========================================================= */

.jfm-process-card {
    width: 100%;

    min-height: 176px;

    padding: 22px 20px 20px;

    background: #ffffff;

    border-radius: 0 28px 28px 0;

    box-sizing: border-box;

    position: relative;

    z-index: 3;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   ICON
========================================================= */

.jfm-process-icon {
    width: 36px;
    height: 36px;

    margin-bottom: 16px;

    background: #e1f2fa;

    border-radius: 3px;

    display: flex;

    align-items: center;
    justify-content: center;
}


.jfm-process-icon i {
    color: #295cab;

    font-size: 17px;

    line-height: 1;
}


/* =========================================================
   CARD TITLE
========================================================= */

.jfm-process-card h3 {
    margin: 0 0 7px;

    color: #3b3b3b;

    font-size: 19px;

    font-weight: 700;

    line-height: 1.25;
}


/* =========================================================
   CARD DESCRIPTION
========================================================= */

.jfm-process-card p {
    margin: 0;

    color: #6a6a6a;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.35;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .jfm-loan-process {
        padding: 42px 0 50px;
    }


    .jfm-process-container {
        padding: 0 20px;
    }


    .jfm-process-heading {
        margin-bottom: 45px;
    }


    .jfm-process-heading h2 {
        font-size: 25px;
    }


    .jfm-process-wrapper {
        gap: 18px;
    }


    .jfm-process-card {
        min-height: 185px;

        padding: 20px 16px;
    }


    .jfm-process-card h3 {
        font-size: 17px;
    }


    .jfm-process-card p {
        font-size: 12px;
    }


    .jfm-process-number {
        width: 43px;
        height: 43px;

        font-size: 17px;
    }


    .jfm-process-line {
        left: calc(50% + 21px);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .jfm-loan-process {
        padding: 38px 0 45px;
    }


    .jfm-process-container {
        padding: 0 15px;
    }


    .jfm-process-heading {
        margin-bottom: 35px;
    }


    .jfm-process-heading h2 {
        font-size: 22px;

        line-height: 1.35;
    }


    .jfm-process-heading h2 span {
        margin: 0 2px;
    }


    /* Vertical layout */

    .jfm-process-wrapper {
        display: flex;

        flex-direction: column;

        gap: 30px;
    }


    .jfm-process-step {
        width: 100%;

        padding-top: 0;

        padding-left: 55px;
    }


    /* Number moves to left */

    .jfm-process-number {
        width: 40px;
        height: 40px;

        top: 20px;
        left: 20px;

        transform: translateX(-50%);

        font-size: 16px;
    }


    /* Vertical connector */

    .jfm-process-line {
        top: 60px;

        left: 20px;

        width: 2px;

        height: calc(100% + 30px);

        display: block;
    }


    .jfm-process-dash {
        width: 2px;

        height: 100%;

        background: repeating-linear-gradient(
            to bottom,
            #ffffff 0,
            #ffffff 10px,
            transparent 10px,
            transparent 20px
        );

        flex: none;
    }


    .jfm-process-arrow {
        position: absolute;

        left: -8px;

        bottom: -3px;

        font-size: 22px;

        transform: rotate(90deg);
    }


    .jfm-process-step:last-child .jfm-process-line {
        display: none;
    }


    /* Card */

    .jfm-process-card {
        min-height: auto;

        padding: 20px;

        border-radius: 0 22px 22px 0;
    }


    .jfm-process-icon {
        width: 35px;
        height: 35px;

        margin-bottom: 13px;
    }


    .jfm-process-card h3 {
        font-size: 18px;

        margin-bottom: 7px;
    }


    .jfm-process-card p {
        font-size: 13px;

        line-height: 1.5;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .jfm-loan-process {
        padding: 32px 0 40px;
    }


    .jfm-process-container {
        padding: 0 12px;
    }


    .jfm-process-heading {
        margin-bottom: 30px;
    }


    .jfm-process-heading h2 {
        font-size: 20px;
    }


    .jfm-process-wrapper {
        gap: 26px;
    }


    .jfm-process-step {
        padding-left: 50px;
    }


    .jfm-process-number {
        width: 38px;
        height: 38px;

        left: 18px;

        font-size: 15px;
    }


    .jfm-process-line {
        left: 18px;

        top: 58px;

        height: calc(100% + 26px);
    }


    .jfm-process-card {
        padding: 18px;

        border-radius: 0 20px 20px 0;
    }


    .jfm-process-card h3 {
        font-size: 17px;
    }


    .jfm-process-card p {
        font-size: 12px;

        line-height: 1.5;
    }

}

/* =========================================
   TESTIMONIALS UI
   ========================================= */

.testimonials {
    width: 100%;
    padding: 55px 0 40px;
    background: #dce9fe;
}

.testimonials .container-tab {
    width: 100%;
    max-width: 1189px;
    margin: 0 auto;
    padding: 0 20px;
}


/* HEADER */

.testimonials .section-header {
    text-align: center;
    margin-bottom: 32px;
}

.testimonials .section-header h4 {
    margin: 0 0 5px;
    font-size: 16px;
    font-weight: 600;
}

.testimonials .section-header h2 {
    margin: 0 0 8px;
    font-size: 30px;
    line-height: 1.25;
    font-weight: 700;
}

.testimonials .section-header p {
    margin: 0;
    color: #666;
    font-size: 14px;
}


/* CARDS */

.testimonials-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;
}


.testimonial-card {
    width: 100%;
    min-width: 0;

    min-height: 185px;

    padding: 22px;

    background: #ffffff;

    border-radius: 12px;

    box-shadow:
        0 7px 22px rgba(0, 0, 0, 0.08);

    border: 1px solid #f1f1f1;

    display: flex;
    flex-direction: column;

    transition: all 0.3s ease;
}


.testimonial-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.12);
}


/* STARS */

.testimonial-card .stars {
    display: flex;

    align-items: center;

    gap: 4px;

    margin-bottom: 14px;
}

.testimonial-card .stars i {
    color: #ffb400;

    font-size: 17px;
}


/* TEXT */

.testimonial-text {
    margin: 0 0 18px;

    color: #333;

    font-size: 14px;

    line-height: 1.35;

    flex: 1;
}


/* CLIENT */

.client-info {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: auto;
}


/* CLIENT IMAGE */

.client-avatar {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    overflow: hidden;

    border-radius: 5px;

    background: #eee;
}

.client-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* CLIENT DETAILS */

.client-details {
    min-width: 0;
}

.client-details h3 {
    margin: 0;

    color: #333;

    font-size: 14px;

    line-height: 1.3;

    font-weight: 700;
}

.client-details span {
    display: block;

    margin-top: 2px;

    color: #777;

    font-size: 12px;

    line-height: 1.3;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 768px) {

    .testimonials {
        padding: 40px 0 30px;
    }

    .testimonials .container-tab {
        padding: 0 15px;
    }

    .testimonials .section-header {
        margin-bottom: 25px;
    }

    .testimonials .section-header h4 {
        font-size: 14px;
    }

    .testimonials .section-header h2 {
        font-size: 24px;
        line-height: 1.25;
    }

    .testimonials .section-header p {
        font-size: 13px;
        line-height: 1.5;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .testimonial-card {
        min-height: auto;

        padding: 18px;

        border-radius: 12px;
    }

    .testimonial-card .stars {
        margin-bottom: 10px;
    }

    .testimonial-card .stars i {
        font-size: 15px;
    }

    .testimonial-text {
        font-size: 13px;

        line-height: 1.45;

        margin-bottom: 15px;
    }

    .client-avatar {
        width: 38px;
        height: 38px;

        flex-basis: 38px;
    }

    .client-details h3 {
        font-size: 13px;
    }

    .client-details span {
        font-size: 11px;
    }
}


/* =========================================
   SMALL MOBILE
   ========================================= */

@media (max-width: 480px) {

    .testimonials {
        padding: 35px 0 25px;
    }

    .testimonials .container-tab {
        padding: 0 12px;
    }

    .testimonials .section-header h2 {
        font-size: 22px;
    }

    .testimonials .section-header p {
        font-size: 12px;
    }

    .testimonial-card {
        padding: 16px;
    }

    .testimonial-text {
        font-size: 12.5px;
    }

    .client-avatar {
        width: 36px;
        height: 36px;

        flex-basis: 36px;
    }
}


/* =========================================================
   JFINMATE HOMEPAGE BLOG
========================================================= */

.jfm-home-blog {
    width: 100%;

    padding: 55px 0 65px;

    background: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.jfm-home-blog-container {
    width: 100%;

    max-width: 1100px;

    margin: 0 auto;

    padding: 0 20px;

    box-sizing: border-box;
}


/* =========================================================
   HEADER
========================================================= */

.jfm-home-blog-header {
    width: 100%;

    text-align: center;

    margin-bottom: 32px;
}


.jfm-home-blog-header h2 {
    margin: 0 0 3px;

    color: #444444;

    font-size: 30px;

    font-weight: 700;

    line-height: 1.25;
}


.jfm-home-blog-header a {
    color: #295cab;

    font-size: 16px;

    font-weight: 400;

    text-decoration: none;
}


.jfm-home-blog-header a:hover {
    color: #00abeb;

    text-decoration: none;
}


/* =========================================================
   GRID
========================================================= */

.jfm-home-blog-grid {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 28px;

    align-items: start;
}


/* =========================================================
   CARD
========================================================= */

.jfm-home-blog-card {
    width: 100%;

    min-width: 0;

    background: transparent;
}


/* =========================================================
   IMAGE
========================================================= */

.jfm-home-blog-image-link {
    display: block;

    width: 100%;

    text-decoration: none;
}


.jfm-home-blog-image {
    width: 100%;

    height: 188px;

    overflow: hidden;

    border-radius: 9px;

    background: #eeeeee;

    margin-bottom: 10px;
}


.jfm-home-blog-image img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition: transform 0.4s ease;
}


.jfm-home-blog-card:hover
.jfm-home-blog-image img {
    transform: scale(1.04);
}


.jfm-home-blog-no-image {
    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #999999;

    font-size: 14px;
}


/* =========================================================
   CONTENT
========================================================= */

.jfm-home-blog-content {
    padding: 0 10px;

    box-sizing: border-box;
}


/* =========================================================
   CATEGORY
========================================================= */

.jfm-home-blog-category {
    display: inline-block;

    margin-bottom: 5px;

    color: #295cab;

    font-size: 10px;

    font-weight: 600;

    text-transform: uppercase;
}


/* =========================================================
   TITLE
========================================================= */

.jfm-home-blog-content h3 {
    margin: 0 0 7px;

    font-size: 19px;

    font-weight: 700;

    line-height: 1.25;
}


.jfm-home-blog-content h3 a {
    color: #3d3d3d;

    text-decoration: none;

    transition: color 0.3s ease;
}


.jfm-home-blog-content h3 a:hover {
    color: #295cab;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.jfm-home-blog-content p {
    margin: 0;

    color: #707070;

    font-size: 12px;

    line-height: 1.45;
}


/* =========================================================
   READ MORE
========================================================= */

.jfm-home-blog-readmore {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-top: 13px;

    color: #295cab;

    font-size: 13px;

    font-weight: 600;

    text-decoration: none;
}


.jfm-home-blog-readmore span {
    font-size: 17px;

    transition: transform 0.3s ease;
}


.jfm-home-blog-readmore:hover {
    color: #00abeb;

    text-decoration: none;
}


.jfm-home-blog-readmore:hover span {
    transform: translateX(4px);
}


/* =========================================================
   EMPTY
========================================================= */

.jfm-home-blog-empty {
    grid-column: 1 / -1;

    text-align: center;

    padding: 30px;

    color: #666666;
}


/* =========================================================
   VIEW ALL
========================================================= */

.jfm-home-blog-view {
    margin-top: 40px;

    text-align: center;
}


.jfm-home-blog-view a {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 24px;

    background: #1e4fd8;

    border-radius: 34px;

    color: #ffffff;

    font-size: 13px;

    font-weight: 600;

    text-decoration: none;

    transition: all 0.3s ease;
}


.jfm-home-blog-view a:hover {
    background: #00abeb;

    color: #ffffff;

    transform: translateY(-2px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .jfm-home-blog {
        padding: 50px 0 55px;
    }


    .jfm-home-blog-container {
        padding: 0 18px;
    }


    .jfm-home-blog-header h2 {
        font-size: 28px;
    }


    .jfm-home-blog-grid {
        gap: 20px;
    }


    .jfm-home-blog-image {
        height: 175px;
    }


    .jfm-home-blog-content {
        padding: 0 6px;
    }


    .jfm-home-blog-content h3 {
        font-size: 17px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .jfm-home-blog {
        padding: 40px 0 50px;
    }


    .jfm-home-blog-container {
        padding: 0 15px;
    }


    .jfm-home-blog-header {
        margin-bottom: 28px;
    }


    .jfm-home-blog-header h2 {
        font-size: 25px;
    }


    .jfm-home-blog-header a {
        font-size: 14px;
    }


    .jfm-home-blog-grid {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .jfm-home-blog-image {
        height: 210px;
    }


    .jfm-home-blog-content {
        padding: 0 5px;
    }


    .jfm-home-blog-content h3 {
        font-size: 19px;
    }


    .jfm-home-blog-content p {
        font-size: 13px;

        line-height: 1.5;
    }


    .jfm-home-blog-readmore {
        font-size: 13px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .jfm-home-blog {
        padding: 35px 0 45px;
    }


    .jfm-home-blog-container {
        padding: 0 12px;
    }


    .jfm-home-blog-header h2 {
        font-size: 23px;
    }


    .jfm-home-blog-image {
        height: 195px;
    }


    .jfm-home-blog-content h3 {
        font-size: 18px;
    }


    .jfm-home-blog-content p {
        font-size: 12px;
    }

}

/* about page  css */


/* =========================================
   FINANCIAL JOURNEY SECTION
========================================= */

.financial-journey-section {

    width: 100%;

    padding: 55px 0 70px;

    background: #ffffff;

    overflow: hidden;
}


/* =========================================
   HEADING
========================================= */

.financial-journey-section .section-header {

    text-align: center;

    max-width: 1000px;

    margin-left: auto;
    margin-right: auto;
}


/* About Company */

.financial-journey-section .finserv-eyebrow {

    font-size: 16px;

    line-height: 1.4;

    margin-bottom: 8px;
}


/* Main Heading */

.financial-journey-section .finserv-trusted {

    font-size: 32px;

    line-height: 1.3;

    font-weight: 700;

    margin-bottom: 14px;
}


/* Description */

.financial-journey-section .section-header p {

    max-width: 850px;

    margin: 0 auto;

    font-size: 15px;

    line-height: 1.7;

    color: #666666;
}


/* =========================================
   IMAGE AREA
========================================= */

.financial-journey-images {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    width: 100%;

    max-width: 760px;

    margin: 55px auto 60px;

    position: relative;
}


/* Individual Images */

.journey-image {

    width: 245px;

    height: 195px;

    padding: 3px;

    background: #ffffff;

    box-sizing: border-box;

    overflow: hidden;

    flex-shrink: 0;
}


/* Image */

.journey-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;
}


/* =========================================
   LEFT IMAGE
========================================= */

.journey-image-left {

    transform: translateY(20px);
}


/* =========================================
   CENTER IMAGE
========================================= */

.journey-image-center {

    width: 245px;

    height: 195px;

    transform: translateY(-20px);

    z-index: 2;
}


/* =========================================
   RIGHT IMAGE
========================================= */

.journey-image-right {

    transform: translateY(20px);
}


/* =========================================
   STATISTICS
========================================= */

.journey-statistics {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 14px;

    width: 100%;

    max-width: 1050px;

    margin: 0 auto;
}


/* Statistics Card */

.journey-stat {

    min-height: 105px;

    padding: 22px 24px;

    background: #ffffff;

    border-radius: 13px;

    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.09);

    display: flex;

    flex-direction: column;

    justify-content: center;

    box-sizing: border-box;
}


/* Number */

.journey-stat h3 {

    margin: 0 0 5px;

    font-size: 24px;

    line-height: 1.2;

    font-weight: 700;

    color: #295cab;
}


/* Plus */

.journey-stat h3 span {

    color: #00abeb;
}


/* Label */

.journey-stat p {

    margin: 0;

    font-size: 14px;

    line-height: 1.5;

    color: #666666;
}


/* =========================================
   LARGE DESKTOP
========================================= */

@media (min-width: 1200px) {

    .financial-journey-section {

        padding-top: 60px;

        padding-bottom: 75px;
    }


    .financial-journey-images {

        max-width: 800px;

        gap: 14px;

        margin-top: 60px;

        margin-bottom: 65px;
    }


    .journey-image {

        width: 255px;

        height: 205px;
    }


    .journey-image-center {

        width: 255px;

        height: 205px;
    }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 992px) {

    .financial-journey-section {

        padding: 50px 20px 60px;
    }


    .financial-journey-section .finserv-trusted {

        font-size: 29px;
    }


    .financial-journey-section .section-header p {

        font-size: 14px;

        max-width: 750px;
    }


    .financial-journey-images {

        max-width: 100%;

        gap: 8px;

        margin-top: 50px;

        margin-bottom: 55px;
    }


    .journey-image {

        width: 30%;

        height: 180px;
    }


    .journey-image-center {

        width: 30%;

        height: 180px;
    }


    .journey-statistics {

        grid-template-columns: repeat(2, 1fr);

        gap: 14px;

        max-width: 700px;
    }


    .journey-stat {

        min-height: 100px;

        padding: 20px;
    }


    .journey-stat h3 {

        font-size: 23px;
    }


    .journey-stat p {

        font-size: 13px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .financial-journey-section {

        padding: 45px 15px 55px;
    }


    .financial-journey-section .finserv-eyebrow {

        font-size: 15px;

        margin-bottom: 7px;
    }


    .financial-journey-section .finserv-trusted {

        font-size: 26px;

        line-height: 1.35;
    }


    .financial-journey-section .section-header p {

        font-size: 13px;

        line-height: 1.6;

        max-width: 650px;
    }


    /* Images */

    .financial-journey-images {

        margin-top: 45px;

        margin-bottom: 50px;

        gap: 6px;

        max-width: 100%;
    }


    .journey-image {

        width: 32%;

        height: 150px;
    }


    .journey-image-center {

        width: 32%;

        height: 150px;
    }


    .journey-image-left {

        transform: translateY(12px);
    }


    .journey-image-center {

        transform: translateY(-12px);
    }


    .journey-image-right {

        transform: translateY(12px);
    }


    /* Statistics */

    .journey-statistics {

        grid-template-columns: repeat(2, 1fr);

        gap: 12px;
    }


    .journey-stat {

        min-height: 95px;

        padding: 18px 20px;

        border-radius: 11px;
    }


    .journey-stat h3 {

        font-size: 21px;

        margin-bottom: 4px;
    }


    .journey-stat p {

        font-size: 13px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .financial-journey-section {

        padding: 40px 12px 50px;
    }


    .financial-journey-section .finserv-eyebrow {

        font-size: 14px;
    }


    .financial-journey-section .finserv-trusted {

        font-size: 23px;

        line-height: 1.35;
    }


    .financial-journey-section .section-header p {

        font-size: 12.5px;

        line-height: 1.6;
    }


    /* Image Area */

    .financial-journey-images {

        margin-top: 40px;

        margin-bottom: 45px;

        gap: 5px;
    }


    .journey-image {

        width: 32%;

        height: 120px;

        padding: 2px;
    }


    .journey-image-center {

        width: 32%;

        height: 120px;
    }


    .journey-image-left {

        transform: translateY(9px);
    }


    .journey-image-center {

        transform: translateY(-9px);
    }


    .journey-image-right {

        transform: translateY(9px);
    }


    /* Statistics */

    .journey-statistics {

        grid-template-columns: repeat(2, 1fr);

        gap: 9px;
    }


    .journey-stat {

        min-height: 85px;

        padding: 15px 13px;

        border-radius: 9px;
    }
/* =========================================
   FINANCIAL JOURNEY SECTION
   EQUAL LEFT & RIGHT SPACE
========================================= */

.financial-journey-section {
    width: 100%;
    padding: 60px 0 75px;
    background: #ffffff;
    overflow: hidden;
}


/* =========================================
   COMMON CONTAINER
========================================= */

.financial-journey-section > .container {
    width: 100%;
    max-width: 1200px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 30px;
    padding-right: 30px;

    box-sizing: border-box;
}


/* =========================================
   HEADING
========================================= */

.financial-journey-section .section-header {
    width: 100%;
    max-width: 900px;

    margin-left: auto;
    margin-right: auto;

    text-align: center;
}


.financial-journey-section .finserv-eyebrow {
    font-size: 16px;
    line-height: 1.4;

    margin-top: 0;
    margin-bottom: 8px;
}


.financial-journey-section .finserv-trusted {
    font-size: 32px;
    line-height: 1.3;

    font-weight: 700;

    margin-top: 0;
    margin-bottom: 14px;
}


.financial-journey-section .section-header p {
    width: 100%;
    max-width: 850px;

    margin-left: auto;
    margin-right: auto;

    font-size: 15px;
    line-height: 1.7;

    color: #666666;
}


/* =========================================
   IMAGE AREA
========================================= */

.financial-journey-images {

    width: 100%;
    max-width: 900px;

    margin: 60px auto 65px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 15px;

    position: relative;

    box-sizing: border-box;
}


/* =========================================
   IMAGE BOX
========================================= */

.journey-image {

    width: 285px;
    height: 215px;

    padding: 3px;

    background: #ffffff;

    box-sizing: border-box;

    overflow: hidden;

    flex-shrink: 0;
}


.journey-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;
}


/* =========================================
   LEFT IMAGE
========================================= */

.journey-image-left {
    transform: translateY(20px);
}


/* =========================================
   CENTER IMAGE
========================================= */

.journey-image-center {

    width: 285px;
    height: 215px;

    transform: translateY(-20px);

    z-index: 2;
}


/* =========================================
   RIGHT IMAGE
========================================= */

.journey-image-right {
    transform: translateY(20px);
}


/* =========================================
   STATISTICS
========================================= */

.journey-statistics {

    width: 100%;
    max-width: 1140px;

    margin-left: auto;
    margin-right: auto;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 18px;

    box-sizing: border-box;
}


/* =========================================
   STATISTICS CARD
========================================= */

.journey-stat {

    width: 100%;

    min-height: 110px;

    padding: 22px 25px;

    background: #ffffff;

    border-radius: 13px;

    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.09);

    display: flex;

    flex-direction: column;

    justify-content: center;

    box-sizing: border-box;
}


.journey-stat h3 {

    margin: 0 0 5px;

    font-size: 24px;

    line-height: 1.2;

    font-weight: 700;

    color: #295cab;
}


.journey-stat h3 span {
    color: #00abeb;
}


.journey-stat p {

    margin: 0;

    font-size: 14px;

    line-height: 1.5;

    color: #666666;
}


/* =========================================
   LARGE DESKTOP
========================================= */

@media (min-width: 1200px) {

    .financial-journey-section > .container {

        max-width: 1280px;

        padding-left: 40px;
        padding-right: 40px;
    }


    .financial-journey-images {

        max-width: 920px;

        gap: 18px;

        margin-top: 65px;

        margin-bottom: 70px;
    }


    .journey-image,
    .journey-image-center {

        width: 290px;
        height: 220px;
    }


    .journey-statistics {

        max-width: 1200px;

        gap: 20px;
    }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 992px) {

    .financial-journey-section {

        padding: 50px 0 60px;
    }


    .financial-journey-section > .container {

        max-width: 100%;

        padding-left: 25px;
        padding-right: 25px;
    }


    .financial-journey-section .finserv-trusted {

        font-size: 29px;
    }


    .financial-journey-section .section-header p {

        font-size: 14px;
    }


    /* Images */

    .financial-journey-images {

        width: 100%;

        max-width: 850px;

        gap: 10px;

        margin-top: 50px;

        margin-bottom: 55px;
    }


    .journey-image,
    .journey-image-center {

        width: calc((100% - 20px) / 3);

        height: 180px;
    }


    /* Statistics */

    .journey-statistics {

        width: 100%;

        max-width: 850px;

        grid-template-columns: repeat(2, 1fr);

        gap: 14px;
    }


    .journey-stat {

        min-height: 100px;

        padding: 20px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .financial-journey-section {

        padding: 45px 0 55px;
    }


    .financial-journey-section > .container {

        width: 100%;

        padding-left: 18px;
        padding-right: 18px;
    }


    .financial-journey-section .finserv-eyebrow {

        font-size: 15px;
    }


    .financial-journey-section .finserv-trusted {

        font-size: 26px;

        line-height: 1.35;
    }


    .financial-journey-section .section-header p {

        font-size: 13px;

        line-height: 1.6;
    }


    /* =================================
       MOBILE IMAGE AREA
    ================================= */

    .financial-journey-images {

        width: 100%;

        max-width: 100%;

        margin-top: 45px;

        margin-bottom: 50px;

        gap: 6px;
    }


    .journey-image,
    .journey-image-center {

        width: calc((100% - 12px) / 3);

        height: 150px;
    }


    .journey-image-left {

        transform: translateY(12px);
    }


    .journey-image-center {

        transform: translateY(-12px);
    }


    .journey-image-right {

        transform: translateY(12px);
    }


    /* =================================
       MOBILE STATISTICS
    ================================= */

    .journey-statistics {

        width: 100%;

        max-width: 100%;

        grid-template-columns: repeat(2, 1fr);

        gap: 12px;
    }


    .journey-stat {

        min-height: 95px;

        padding: 18px 20px;

        border-radius: 11px;
    }


    .journey-stat h3 {

        font-size: 21px;
    }


    .journey-stat p {

        font-size: 13px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .financial-journey-section {

        padding: 40px 0 50px;
    }


    .financial-journey-section > .container {

        padding-left: 12px;
        padding-right: 12px;
    }


    .financial-journey-section .finserv-eyebrow {

        font-size: 14px;
    }


    .financial-journey-section .finserv-trusted {

        font-size: 23px;

        line-height: 1.35;
    }


    .financial-journey-section .section-header p {

        font-size: 12.5px;

        line-height: 1.6;
    }


    /* Images */

    .financial-journey-images {

        margin-top: 40px;

        margin-bottom: 45px;

        gap: 5px;
    }


    .journey-image,
    .journey-image-center {

        width: calc((100% - 10px) / 3);

        height: 120px;

        padding: 2px;
    }


    .journey-image-left {

        transform: translateY(9px);
    }


    .journey-image-center {

        transform: translateY(-9px);
    }


    .journey-image-right {

        transform: translateY(9px);
    }


    /* Statistics */

    .journey-statistics {

        grid-template-columns: repeat(2, 1fr);

        gap: 9px;
    }


    .journey-stat {

        min-height: 85px;

        padding: 15px 13px;

        border-radius: 9px;
    }


    .journey-stat h3 {

        font-size: 19px;

        margin-bottom: 3px;
    }


    .journey-stat p {

        font-size: 11.5px;

        line-height: 1.4;
    }

}

    .journey-stat h3 {

        font-size: 19px;

        margin-bottom: 3px;
    }


    .journey-stat p {

        font-size: 11.5px;

        line-height: 1.4;
    }

}
/* =========================================================
   ABOUT PAGE
   SAME LEFT & RIGHT SPACE AS INDEX PAGE
========================================================= */

/* Desktop */
.financial-journey-section > .container,
.property-financing-container,
.mission-values-section > .container,
.about-page-section-container {

    width: 100%;

    max-width: 1200px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 35px;
    padding-right: 35px;

    box-sizing: border-box;
}


/* =========================================
   FINANCIAL JOURNEY
========================================= */

.financial-journey-section .financial-journey-images {

    width: 100%;

    max-width: 100%;

    box-sizing: border-box;
}


.financial-journey-section .journey-statistics {

    width: 100%;

    max-width: 100%;

    box-sizing: border-box;
}


/* =========================================
   PROPERTY FINANCING
========================================= */

.property-financing-container {

    max-width: 1200px;

    padding-left: 35px;
    padding-right: 35px;
}


/* =========================================
   MISSION / VALUES / VISION
========================================= */

.mission-values-section > .container {

    max-width: 1200px;

    padding-left: 35px;
    padding-right: 35px;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .financial-journey-section > .container,
    .property-financing-container,
    .mission-values-section > .container,
    .about-page-section-container {

        max-width: 100%;

        padding-left: 25px;
        padding-right: 25px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .financial-journey-section > .container,
    .property-financing-container,
    .mission-values-section > .container,
    .about-page-section-container {

        max-width: 100%;

        padding-left: 15px;
        padding-right: 15px;
    }

}
/* =========================================================
   JFINserv ABOUT PAGE
   SAME LEFT & RIGHT SPACING AS INDEX PAGE
   ========================================================= */


/* =========================================================
   GLOBAL
   ========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}


/* =========================================================
   COMMON ABOUT PAGE CONTAINER
   INDEX PAGE:
   max-width: 1200px
   left/right padding: 35px
   ========================================================= */

.financial-journey-section > .container,
.property-financing-container,
.mission-values-section > .container,
.about-page-section-container,
.awards-section > .container-tab {

    width: 100% !important;

    max-width: 1200px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 35px !important;
    padding-right: 35px !important;

    box-sizing: border-box !important;
}


/* =========================================================
   FINANCIAL JOURNEY SECTION
   ========================================================= */

.financial-journey-section {
    width: 100%;

    box-sizing: border-box;

    overflow: hidden;
}


/* Heading */

.financial-journey-section .section-header {
    width: 100%;

    max-width: 1000px;

    margin-left: auto;
    margin-right: auto;

    box-sizing: border-box;
}


/* Images */

.financial-journey-section .financial-journey-images {

    width: 100% !important;

    max-width: 100% !important;

    margin-left: auto;
    margin-right: auto;

    box-sizing: border-box;
}


/* Statistics */

.financial-journey-section .journey-statistics {

    width: 100% !important;

    max-width: 100% !important;

    margin-left: auto;
    margin-right: auto;

    box-sizing: border-box;
}


/* =========================================================
   PROPERTY FINANCING
   ========================================================= */

.property-financing-section {

    width: 100%;

    box-sizing: border-box;

    overflow: hidden;
}


.property-financing-container {

    width: 100% !important;

    max-width: 1200px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 35px !important;
    padding-right: 35px !important;

    box-sizing: border-box !important;
}


/* Main property content */

.property-financing-content {

    width: 100%;

    box-sizing: border-box;
}


/* =========================================================
   MISSION / VALUES / VISION
   ========================================================= */

.mission-values-section {

    width: 100%;

    box-sizing: border-box;

    overflow: hidden;
}


.mission-values-section > .container {

    width: 100% !important;

    max-width: 1200px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 35px !important;
    padding-right: 35px !important;

    box-sizing: border-box !important;
}


/* Mission / Values / Vision row */

.mission-values-row {

    width: 100%;

    box-sizing: border-box;
}


/* =========================================================
   OUR TEAM
   ========================================================= */

.about-page-team-section {

    width: 100%;

    box-sizing: border-box;

    overflow: hidden;
}


.about-page-section-container {

    width: 100% !important;

    max-width: 1200px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 35px !important;
    padding-right: 35px !important;

    box-sizing: border-box !important;
}


/* Team grid */

.about-page-team-grid {

    width: 100%;

    box-sizing: border-box;
}


/* Team cards */

.about-page-team-card {

    width: 100%;

    box-sizing: border-box;
}


/* Team images */

.about-page-team-image img {

    max-width: 100%;

    height: auto;

    display: block;
}


/* =========================================================
   AWARDS
   MAKE AWARDS FOLLOW THE SAME CONTENT WIDTH
   ========================================================= */

.awards-section {

    width: 100% !important;

    box-sizing: border-box !important;

    overflow: hidden;
}


.awards-section .container-tab {

    width: 100% !important;

    max-width: 1200px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 35px !important;
    padding-right: 35px !important;

    box-sizing: border-box !important;
}


/* Awards grid */

.awards-section .awards-grid {

    width: 100% !important;

    box-sizing: border-box !important;
}


/* =========================================================
   HERO CONTENT
   Keep hero background full width,
   but align its content with the same page spacing.
   ========================================================= */

.video-hero {

    width: 100%;

    overflow: hidden;
}


.video-banner-overlay {

    width: 100%;

    box-sizing: border-box;
}


.video-overlay-content {

    width: 100%;

    max-width: 1200px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 35px;
    padding-right: 35px;

    box-sizing: border-box;
}


/* About team hero */

.about-page-page-hero {

    width: 100%;

    box-sizing: border-box;

    overflow: hidden;
}


.about-page-hero-content {

    width: 100%;

    max-width: 1200px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 35px;
    padding-right: 35px;

    box-sizing: border-box;
}


/* =========================================================
   ALL ABOUT PAGE IMAGES
   ========================================================= */

.financial-journey-section img,
.property-financing-section img,
.mission-values-section img,
.about-page-team-section img,
.awards-section img {

    max-width: 100%;
}


/* =========================================================
   DESKTOP
   1025px AND ABOVE
   ========================================================= */

@media (min-width: 1025px) {

    .financial-journey-section > .container,
    .property-financing-container,
    .mission-values-section > .container,
    .about-page-section-container,
    .awards-section > .container-tab {

        max-width: 1200px !important;

        padding-left: 35px !important;
        padding-right: 35px !important;
    }


    .video-overlay-content,
    .about-page-hero-content {

        max-width: 1200px;

        padding-left: 35px;
        padding-right: 35px;
    }

}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1400px) {

    .financial-journey-section > .container,
    .property-financing-container,
    .mission-values-section > .container,
    .about-page-section-container,
    .awards-section > .container-tab {

        max-width: 1200px !important;

        padding-left: 35px !important;
        padding-right: 35px !important;
    }


    .video-overlay-content,
    .about-page-hero-content {

        max-width: 1200px;

        padding-left: 35px;
        padding-right: 35px;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .financial-journey-section > .container,
    .property-financing-container,
    .mission-values-section > .container,
    .about-page-section-container,
    .awards-section > .container-tab {

        width: 100% !important;

        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 25px !important;
        padding-right: 25px !important;

        box-sizing: border-box !important;
    }


    .video-overlay-content,
    .about-page-hero-content {

        width: 100%;

        max-width: 100%;

        padding-left: 25px;
        padding-right: 25px;

        box-sizing: border-box;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .financial-journey-section > .container,
    .property-financing-container,
    .mission-values-section > .container,
    .about-page-section-container,
    .awards-section > .container-tab {

        width: 100% !important;

        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 15px !important;
        padding-right: 15px !important;

        box-sizing: border-box !important;
    }


    .video-overlay-content,
    .about-page-hero-content {

        width: 100%;

        max-width: 100%;

        padding-left: 15px;
        padding-right: 15px;

        box-sizing: border-box;
    }


    .financial-journey-section .financial-journey-images,
    .financial-journey-section .journey-statistics,
    .property-financing-content,
    .mission-values-row,
    .about-page-team-grid,
    .awards-section .awards-grid {

        width: 100%;

        box-sizing: border-box;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .financial-journey-section > .container,
    .property-financing-container,
    .mission-values-section > .container,
    .about-page-section-container,
    .awards-section > .container-tab {

        width: 100% !important;

        max-width: 100% !important;

        padding-left: 12px !important;
        padding-right: 12px !important;

        box-sizing: border-box !important;
    }


    .video-overlay-content,
    .about-page-hero-content {

        padding-left: 12px;
        padding-right: 12px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .financial-journey-section > .container,
    .property-financing-container,
    .mission-values-section > .container,
    .about-page-section-container,
    .awards-section > .container-tab {

        padding-left: 10px !important;
        padding-right: 10px !important;
    }


    .video-overlay-content,
    .about-page-hero-content {

        padding-left: 10px;
        padding-right: 10px;
    }

}

/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .financial-journey-section > .container,
    .property-financing-container,
    .mission-values-section > .container,
    .about-page-section-container {

        padding-left: 12px;
        padding-right: 12px;
    }

}


/* =========================================
   PROPERTY FINANCING SECTION
   ========================================= */

.property-financing-section {
    width: 100%;
    background: #ffffff;

    padding: 55px 20px 65px;

    overflow: hidden;
}


.property-financing-container {
    width: 100%;
    max-width: 1050px;

    margin: 0 auto;
}


/* =========================================
   HEADING
   ========================================= */

.property-financing-heading {
    width: 100%;

    text-align: center;

    margin-bottom: 45px;
}


.property-financing-heading h2 {
    margin: 0;
    padding: 0;

    font-family: Arial, sans-serif;

    font-size: 23px;
    line-height: 1.4;

    font-weight: 500;

    color: #333333;
}


/* =========================================
   MAIN CONTENT
   ========================================= */

.property-financing-content {

    display: grid;

    grid-template-columns: 1fr 270px 1fr;

    align-items: center;

    column-gap: 38px;

    width: 100%;
}


/* =========================================
   LEFT / RIGHT COLUMNS
   ========================================= */

.property-financing-left,
.property-financing-right {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    height: 215px;
}


/* =========================================
   FINANCING ITEM
   ========================================= */

.financing-item {

    display: flex;

    align-items: center;

    gap: 11px;

    min-height: 48px;

    width: 100%;
}


/* =========================================
   ICON
   ========================================= */

.financing-icon {

    width: 34px;
    height: 34px;

    min-width: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #eaf2ff;

    border-radius: 7px;

    color: #1467d9;

    font-size: 15px;

    flex-shrink: 0;
}


/* =========================================
   TEXT
   ========================================= */

.financing-text {

    font-family: Arial, sans-serif;

    font-size: 14px;

    line-height: 1.4;

    font-weight: 400;

    color: #222222;

    max-width: 245px;
}


/* =========================================
   CENTER IMAGE
   ========================================= */

.property-financing-image {

    width: 252px;

    height: 170px;

    margin: 0 auto;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ffffff;

    /* border: 2px solid #7183a9; */

    box-sizing: border-box;

    overflow: hidden;
}


/* Image */

.property-financing-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

    object-position: center;

    padding: 0;

    margin: 0;
}


/* =========================================
   DESKTOP ALIGNMENT
   ========================================= */

.property-financing-left .financing-item {

    justify-content: flex-start;
}


.property-financing-right .financing-item {

    justify-content: flex-start;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 900px) {

    .property-financing-section {

        padding-left: 15px;
        padding-right: 15px;

    }


    .property-financing-content {

        grid-template-columns: 1fr 240px 1fr;

        column-gap: 22px;

    }


    .property-financing-image {

        width: 225px;

        height: 155px;

    }


    .financing-text {

        font-size: 13px;

        max-width: 220px;

    }


    .financing-icon {

        width: 33px;

        height: 33px;

        min-width: 33px;

        font-size: 14px;

    }

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 700px) {

    .property-financing-section {

        padding: 40px 15px 50px;

    }


    .property-financing-heading {

        margin-bottom: 30px;

    }


    .property-financing-heading h2 {

        font-size: 20px;

        line-height: 1.4;

    }


    .property-financing-content {

        display: flex;

        flex-direction: column;

        gap: 25px;

    }


    /* Center Image */

    .property-financing-image {

        order: 1;

        width: 280px;

        height: 180px;

        margin: 0 auto;

    }


    /* Left */

    .property-financing-left {

        order: 2;

    }


    /* Right */

    .property-financing-right {

        order: 3;

    }


    .property-financing-left,
    .property-financing-right {

        width: 100%;

        height: auto;

        gap: 18px;

    }


    .financing-item {

        width: 100%;

        min-height: 45px;

    }


    .financing-icon {

        width: 34px;

        height: 34px;

        min-width: 34px;

        font-size: 14px;

    }


    .financing-text {

        max-width: none;

        font-size: 14px;

        line-height: 1.4;

    }

}


/* =========================================
   SMALL MOBILE
   ========================================= */

@media (max-width: 480px) {

    .property-financing-section {

        padding: 35px 14px 45px;

    }


    .property-financing-heading h2 {

        font-size: 19px;

    }


    .property-financing-image {

        width: 270px;

        height: 175px;

    }


    .financing-text {

        font-size: 13px;

    }


    .financing-icon {

        width: 32px;

        height: 32px;

        min-width: 32px;

    }

}


/* ==========================================
   MISSION / VALUES / VISION
========================================== */

.mission-values-section {
    width: 100%;
    padding: 30px 0 70px;
    background: #fff;
}

.mission-values-section .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}


/* ==========================================
   THREE COLUMN ROW
========================================== */

.mission-values-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 38px;
    align-items: start;
}


/* ==========================================
   ITEM
========================================== */

.mission-values-item {
    width: 100%;
}


/* ==========================================
   IMAGE
========================================== */

.mission-values-image {
    width: 100%;
    height: 155px;
    overflow: hidden;
    border-radius: 9px;
    margin-bottom: 20px;
}

.mission-values-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


/* ==========================================
   CONTENT
========================================== */

.mission-values-content h3 {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 600;
    color: #333;
}

.mission-values-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: #666;
    font-weight: 400;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 991px) {

    .mission-values-section {
        padding: 25px 0 60px;
    }

    .mission-values-row {
        gap: 25px;
    }

    .mission-values-image {
        height: 145px;
    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) {

    .mission-values-section {
        padding: 25px 15px 50px;
    }

    .mission-values-section .container {
        padding: 0;
    }

    .mission-values-row {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .mission-values-image {
        height: 190px;
        margin-bottom: 16px;
    }

    .mission-values-content h3 {
        font-size: 18px;
        margin-bottom: 7px;
    }

    .mission-values-content p {
        font-size: 12px;
        line-height: 1.5;
    }

}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 480px) {

    .mission-values-section {
        padding: 20px 12px 40px;
    }

    .mission-values-row {
        gap: 30px;
    }

    .mission-values-image {
        height: 175px;
        border-radius: 8px;
    }

}


/* =========================================================
   COMMON PAGE SECTION SPACING
   Applies to ALL sections EXCEPT AWARDS
========================================================= */

/* Prevent horizontal overflow */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}


/* =========================================================
   FINANCIAL JOURNEY
========================================================= */

.financial-journey-section {
    width: 100%;
    box-sizing: border-box;
}

.financial-journey-section > .container {
    width: 100%;
    max-width: 1100px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 20px;
    padding-right: 20px;

    box-sizing: border-box;
}


/* =========================================================
   MISSION / VALUES / VISION
========================================================= */

.mission-values-section {
    width: 100%;
    box-sizing: border-box;
}

.mission-values-section > .container {
    width: 100%;
    max-width: 1100px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 20px;
    padding-right: 20px;

    box-sizing: border-box;
}


/* =========================================================
   TEAM SECTION
========================================================= */

.about-page-team-section {
    width: 100%;
    box-sizing: border-box;
}

.about-page-section-container {
    width: 100%;
    max-width: 1100px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 20px;
    padding-right: 20px;

    box-sizing: border-box;
}


/* =========================================================
   TEAM GRID
========================================================= */

.about-page-team-grid {
    width: 100%;
    box-sizing: border-box;
}


/* =========================================================
   TEAM CARDS
========================================================= */

.about-page-team-card {
    box-sizing: border-box;
}


/* =========================================================
   ALL IMAGES
========================================================= */

.financial-journey-section img,
.mission-values-section img,
.about-page-team-section img {
    max-width: 100%;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .financial-journey-section > .container,
    .mission-values-section > .container,
    .about-page-section-container {
        max-width: 100%;

        padding-left: 20px;
        padding-right: 20px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .financial-journey-section > .container,
    .mission-values-section > .container,
    .about-page-section-container {
        width: 100%;

        max-width: 100%;

        margin-left: auto;
        margin-right: auto;

        padding-left: 15px;
        padding-right: 15px;

        box-sizing: border-box;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .financial-journey-section > .container,
    .mission-values-section > .container,
    .about-page-section-container {
        padding-left: 12px;
        padding-right: 12px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .financial-journey-section > .container,
    .mission-values-section > .container,
    .about-page-section-container {
        padding-left: 10px;
        padding-right: 10px;
    }

}


/* =========================================================
   IMPORTANT:
   AWARDS SECTION IS NOT TOUCHED
========================================================= */

/*
.awards-section {
    intentionally excluded
}

.awards-section .container-tab {
    intentionally excluded
}
*/



/* ==========================================
   AWARDS SECTION
========================================== */

.awards-section {
    width: 100% !important;
    padding: 25px 0 50px !important;
    background: #dce9fe !important;
}

.awards-section .container-tab {
    width: 100% !important;
    max-width: 1040px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}


/* ==========================================
   HEADING
========================================== */

.awards-section .awards-header {
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 20px !important;
}

.awards-section .awards-header h4 {
    margin: 0 0 5px !important;
    padding: 0 !important;

    color: #295cab !important;

    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
}

.awards-section .awards-header h2 {
    margin: 0 !important;
    padding: 0 !important;

    color: #333333 !important;

    font-size: 21px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}


/* ==========================================
   AWARDS GRID
========================================== */

.awards-section .awards-grid {
    width: 100% !important;

    display: grid !important;

    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 10px 12px !important;

    align-items: stretch !important;
}


/* ==========================================
   AWARD CARD
========================================== */

.awards-section .award-card {
    width: 100% !important;

    min-height: 102px !important;

    background: #ffffff !important;

    border-radius: 10px !important;

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08) !important;

    display: flex !important;

    /*
       IMPORTANT FIX
       Force trophy and content into one row
    */
    flex-direction: row !important;

    align-items: center !important;
    justify-content: flex-start !important;

    padding: 12px 15px !important;

    box-sizing: border-box !important;

    overflow: visible !important;

    transition: transform 0.2s ease,
                box-shadow 0.2s ease !important;
}

.awards-section .award-card:hover {
    transform: translateY(-2px) !important;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.10) !important;
}


/* ==========================================
   TROPHY
========================================== */

.awards-section .award-trophy {
    width: 58px !important;
    min-width: 58px !important;

    height: 72px !important;

    flex: 0 0 58px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 7px 0 0 !important;

    padding: 0 !important;
}

.awards-section .award-trophy img {
    width: 72px !important;
    height: 65px !important;

    max-width: none !important;

    object-fit: contain !important;

    display: block !important;

    margin: 0 !important;
}


/* ==========================================
   AWARD INFORMATION
========================================== */

.awards-section .award-info {
    flex: 1 1 auto !important;

    min-width: 0 !important;

    width: auto !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    justify-content: center !important;

    text-align: left !important;

    padding: 0 !important;

    margin: 0 !important;
}


/* ==========================================
   BANK LOGO
========================================== */

.awards-section .bank-logo {
    width: 100% !important;

    height: 22px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: flex-start !important;

    margin: 0 0 4px 0 !important;

    padding: 0 !important;
}

.awards-section .bank-logo img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 78px !important;
    max-height: 32px !important;

    object-fit: contain !important;

    object-position: left center !important;

    margin: 0 !important;
}


/* ==========================================
   AWARD NAME
========================================== */

.awards-section .award-name {
    width: 100% !important;

    color: #333333 !important;

    font-size: 18px !important;

    line-height: 1.2 !important;

    font-weight: 600 !important;

    text-align: left !important;

    word-break: normal !important;

    overflow-wrap: break-word !important;

    white-space: normal !important;

    margin: 0 !important;

    padding: 0 !important;
}


/* ==========================================
   AWARD BOTTOM / RANK / YEAR
========================================== */

.awards-section .award-bottom {
    width: 100% !important;

    color: #333333 !important;

    font-size: 17px !important;

    line-height: 1.2 !important;

    font-weight: 600 !important;

    text-align: left !important;

    margin: 1px 0 0 0 !important;

    padding: 0 !important;
}

.awards-section .award-bottom sup {
    font-size: 7px !important;

    position: relative !important;

    top: -3px !important;
}

.awards-section .award-bottom span {
    font-size: 14px !important;

    font-weight: 400 !important;

    margin-left: 3px !important;

    color: #444444 !important;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 991px) {

    .awards-section .container-tab {
        padding: 0 15px !important;
    }

    .awards-section .awards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .awards-section .award-card {
        min-height: 105px !important;
    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 600px) {

    .awards-section {
        padding: 20px 0 40px !important;
    }

    .awards-section .awards-header {
        margin-bottom: 18px !important;
    }

    .awards-section .awards-header h4 {
        font-size: 12px !important;
    }

    .awards-section .awards-header h2 {
        font-size: 19px !important;
    }

    .awards-section .awards-grid {
        grid-template-columns: 1fr !important;

        gap: 10px !important;
    }

    .awards-section .award-card {
        min-height: 100px !important;

        /*
           Keep row layout on mobile too
        */
        flex-direction: row !important;

        padding: 12px 15px !important;
    }

    .awards-section .award-trophy {
        width: 60px !important;
        min-width: 60px !important;

        flex-basis: 60px !important;

        height: 70px !important;

        margin-right: 6px !important;
    }

    .awards-section .award-trophy img {
        width: 48px !important;
        height: 64px !important;
    }

    .awards-section .award-info {
        text-align: left !important;
        align-items: flex-start !important;
    }

    .awards-section .award-name {
        font-size: 13px !important;

        text-align: left !important;
    }

    .awards-section .award-bottom {
        font-size: 12px !important;

        text-align: left !important;
    }

    .awards-section .award-bottom span {
        font-size: 10px !important;
    }

}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 400px) {

    .awards-section .container-tab {
        padding: 0 10px !important;
    }

    .awards-section .award-card {
        padding: 10px 12px !important;

        flex-direction: row !important;
    }

    .awards-section .award-trophy {
        width: 55px !important;
        min-width: 55px !important;

        flex-basis: 55px !important;
    }

    .awards-section .award-trophy img {
        width: 45px !important;
        height: 60px !important;
    }

    .awards-section .award-name {
        font-size: 12px !important;
    }

    .awards-section .award-bottom {
        font-size: 11px !important;
    }

    .awards-section .award-bottom span {
        font-size: 9px !important;
    }

}

    /* ============================================================
   OUR TEAM SECTION – MOBILE RESPONSIVE (UI unchanged)
   Only adds responsive behavior, preserves all existing styles
   ============================================================ */

/* ----- force images to be responsive & maintain aspect ratio ----- */
.about-page-team-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* ----- mobile first: ensure grid stacks properly on small screens ----- */
.about-page-team-grid {
  display: grid;
  grid-template-columns: 1fr; /* single column on mobile */
  gap: 1.5rem;
  justify-items: center;
}

/* ----- cards take full width on mobile, but keep max-width for readability ----- */
.about-page-team-card {
  width: 100%;
  max-width: 320px; /* prevents cards from becoming too wide on mobile */
  margin: 0 auto;
}

/* ----- tablet (portrait) – 2 columns ----- */
@media (min-width: 600px) {
  .about-page-team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  .about-page-team-card {
    max-width: 340px;
  }
}

/* ----- desktop – 3 columns ----- */
@media (min-width: 1024px) {
  .about-page-team-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }
  .about-page-team-card {
    max-width: 360px;
  }
}

/* ----- large screens – 4 columns (optional, but matches your grid) ----- */
@media (min-width: 1280px) {
  .about-page-team-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .about-page-team-card {
    max-width: 100%;
  }
}

/* ----- extra small devices (below 380px) – prevent overflow ----- */
@media (max-width: 380px) {
  .about-page-team-grid {
    gap: 1.2rem;
  }
  .about-page-team-card {
    max-width: 100%;
  }
  .about-page-team-info {
    padding: 0.8rem 0.5rem 1.2rem;
  }
  .about-page-team-name {
    font-size: 1rem;
  }
  .about-page-team-designation {
    font-size: 0.8rem;
  }
}

/* ----- preserve all existing styles: no UI changes ----- */
/* The following ensures that your existing styles (colors, fonts, shadows, etc.)
   remain untouched. Only layout & spacing are adjusted for responsiveness. */

.about-page-team-section {
  /* your existing styles remain */
}

.about-page-section-container {
  /* your existing styles remain */
}

.about-page-section-header {
  /* your existing styles remain */
}

.about-page-section-label {
  /* your existing styles remain */
}

.about-page-team-overlay {
  /* your existing styles remain */
}

.about-page-team-social {
  /* your existing styles remain */
}

.about-page-social-icon {
  /* your existing styles remain */
}

/* ====== END – NO UI CHANGES, ONLY RESPONSIVE BEHAVIOR ====== */



/* home loan blade css */
    

  

@media (max-width: 768px) {

    /* Main section */
    .jf-process {
        width: 100%;
        padding: 60px 15px !important;
        overflow: hidden;
    }

    .jf-process .jf-container {
        width: 100%;
        max-width: 100%;
        padding: 0 !important;
        margin: 0 auto;
    }


    /* -----------------------------------------
       SECTION HEADING
    ----------------------------------------- */

    .jf-process .jf-section-heading {
        width: 100%;
        max-width: 100%;
        margin: 0 auto 30px !important;
        padding: 0 5px;

        text-align: center;
    }

    .jf-process .eyebrow {
        display: block;

        margin: 0 0 9px !important;

        font-size: 11px !important;
        line-height: 1.4;

        letter-spacing: 1px;

        color: #00abe9 !important;
    }

    .jf-process .jf-section-heading h2 {
        width: 100%;

        margin: 0 0 10px !important;

        font-size: 28px !important;
        line-height: 1.25 !important;

        color: #fff;
    }

    .jf-process .jf-section-heading p {
        width: 100%;

        margin: 0 auto !important;

        font-size: 14px !important;
        line-height: 1.55 !important;

        color: rgba(255,255,255,0.72);
    }


    /* -----------------------------------------
       INTRO BOX
    ----------------------------------------- */

    .jf-process-intro {
        width: 100%;
        max-width: 100%;

        display: flex !important;

        align-items: flex-start !important;

        gap: 12px !important;

        margin: 0 auto 40px !important;

        padding: 18px !important;

        border-radius: 14px !important;

        box-sizing: border-box;
    }

    .jf-process-quote-icon {
        flex: 0 0 36px !important;

        width: 36px !important;
        height: 36px !important;

        font-size: 14px !important;

        background: #00abe9 !important;

        color: #fff !important;
    }

    .jf-process-intro p {
        width: auto;

        flex: 1;

        margin: 0 !important;

        font-size: 13px !important;
        line-height: 1.65 !important;

        text-align: left;

        color: rgba(255,255,255,0.82);
    }


    /* -----------------------------------------
       INFOGRAPHIC
    ----------------------------------------- */

    .jf-process-infographic {
        position: relative;

        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        gap: 0 !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    /* -----------------------------------------
       VERTICAL CONNECTING LINE
    ----------------------------------------- */

    .jf-process-line {
        display: block !important;

        position: absolute !important;

        top: 40px !important;
        bottom: 40px !important;

        left: 50% !important;
        right: auto !important;

        width: 2px !important;
        height: auto !important;

        transform: translateX(-50%) !important;

        background:
            linear-gradient(
                180deg,
                rgba(0,171,233,0.15),
                #00abe9,
                rgba(0,171,233,0.15)
            ) !important;

        z-index: 0 !important;
    }


    /* -----------------------------------------
       EACH STEP
    ----------------------------------------- */

    .jf-process-card {
        position: relative !important;

        z-index: 1 !important;

        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: flex-start !important;

        padding: 0 10px 45px !important;

        margin: 0 !important;

        text-align: center !important;

        box-sizing: border-box;
    }

    .jf-process-card:last-child {
        padding-bottom: 10px !important;
    }


    /* -----------------------------------------
       STEP ICON
    ----------------------------------------- */

    .jf-process-icon {
        position: relative !important;

        z-index: 2 !important;

        width: 82px !important;
        height: 82px !important;

        min-width: 82px !important;
        min-height: 82px !important;

        margin: 0 auto 10px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        border: 5px solid #00abe9 !important;

        border-radius: 50% !important;

        background: #fff !important;

        color: #07547d !important;

        font-size: 23px !important;

        box-shadow:
            0 8px 25px rgba(0,0,0,0.20);

        box-sizing: border-box;
    }


    /* -----------------------------------------
       STEP NUMBER
    ----------------------------------------- */

    .jf-process-number {
        position: relative !important;

        z-index: 3 !important;

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        min-width: 42px !important;
        height: 25px !important;

        margin: 0 auto 9px !important;

        padding: 0 9px !important;

        border-radius: 20px !important;

        background: #07547d !important;

        border: 1px solid #00abe9 !important;

        color: #00abe9 !important;

        font-size: 11px !important;
        font-weight: 800 !important;

        line-height: 1 !important;

        box-sizing: border-box;
    }


    /* -----------------------------------------
       STEP CONTENT
    ----------------------------------------- */

    .jf-process-card-content {
        position: relative;

        z-index: 2;

        width: 100% !important;

        max-width: 340px !important;

        margin: 0 auto !important;

        padding: 0 !important;

        text-align: center !important;
    }

    .jf-process-card-content h3 {
        width: 100%;

        margin: 0 0 8px !important;

        font-size: 17px !important;
        line-height: 1.4 !important;

        color: #fff !important;
    }

    .jf-process-card-content p {
        width: 100%;

        margin: 0 !important;

        font-size: 13px !important;
        line-height: 1.6 !important;

        color: rgba(255,255,255,0.67) !important;
    }


    /* -----------------------------------------
       FOOTNOTE
    ----------------------------------------- */

    .jf-process .jf-footnote {
        width: 100%;

        margin: 25px auto 0 !important;

        padding: 0 10px;

        text-align: center;

        font-size: 11px !important;
        line-height: 1.5;

        color: rgba(255,255,255,0.5) !important;
    }
}


/* =========================================================
   MOBILE 575px
========================================================= */

@media (max-width: 575px) {

    .jf-process {
        padding: 48px 14px !important;
    }


    /* Heading */

    .jf-process .jf-section-heading {
        margin-bottom: 25px !important;
        padding: 0 3px;
    }

    .jf-process .eyebrow {
        font-size: 10px !important;
        letter-spacing: 0.9px !important;
    }

    .jf-process .jf-section-heading h2 {
        font-size: 25px !important;
        line-height: 1.3 !important;
    }

    .jf-process .jf-section-heading p {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }


    /* Intro */

    .jf-process-intro {
        display: block !important;

        padding: 18px 16px !important;

        margin-bottom: 38px !important;

        text-align: center !important;
    }

    .jf-process-quote-icon {
        margin: 0 auto 12px !important;
    }

    .jf-process-intro p {
        font-size: 12.5px !important;
        line-height: 1.65 !important;

        text-align: center !important;
    }


    /* Steps */

    .jf-process-card {
        padding-left: 5px !important;
        padding-right: 5px !important;
        padding-bottom: 42px !important;
    }

    .jf-process-icon {
        width: 78px !important;
        height: 78px !important;

        min-width: 78px !important;
        min-height: 78px !important;

        border-width: 5px !important;

        font-size: 22px !important;
    }

    .jf-process-number {
        min-width: 40px !important;
        height: 24px !important;

        font-size: 10px !important;
    }

    .jf-process-card-content {
        max-width: 310px !important;
    }

    .jf-process-card-content h3 {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }

    .jf-process-card-content p {
        font-size: 12.5px !important;
        line-height: 1.6 !important;
    }

    .jf-process .jf-footnote {
        margin-top: 20px !important;

        font-size: 10.5px !important;
    }
}


/* =========================================================
   SMALL MOBILE 375px
========================================================= */

@media (max-width: 375px) {

    .jf-process {
        padding: 42px 12px !important;
    }


    .jf-process .jf-section-heading h2 {
        font-size: 23px !important;
    }

    .jf-process .jf-section-heading p {
        font-size: 12.5px !important;
    }


    .jf-process-intro {
        padding: 16px 13px !important;

        border-radius: 12px !important;
    }

    .jf-process-intro p {
        font-size: 12px !important;
    }


    .jf-process-card {
        padding-bottom: 38px !important;
    }


    .jf-process-icon {
        width: 74px !important;
        height: 74px !important;

        min-width: 74px !important;
        min-height: 74px !important;

        font-size: 20px !important;
    }


    .jf-process-number {
        min-width: 38px !important;
        height: 23px !important;

        font-size: 10px !important;
    }


    .jf-process-card-content {
        max-width: 290px !important;
    }


    .jf-process-card-content h3 {
        font-size: 15px !important;
    }

    .jf-process-card-content p {
        font-size: 12px !important;
    }


    .jf-process-line {
        top: 36px !important;
        bottom: 36px !important;
    }
}


/* =========================================================
   EXTRA SMALL 320px
========================================================= */

@media (max-width: 320px) {

    .jf-process {
        padding: 38px 10px !important;
    }


    .jf-process .jf-section-heading h2 {
        font-size: 21px !important;
    }


    .jf-process .jf-section-heading p {
        font-size: 12px !important;
    }


    .jf-process-intro {
        padding: 15px 12px !important;
    }

    .jf-process-intro p {
        font-size: 11.5px !important;
    }


    .jf-process-icon {
        width: 70px !important;
        height: 70px !important;

        min-width: 70px !important;
        min-height: 70px !important;

        font-size: 19px !important;
    }


    .jf-process-number {
        min-width: 36px !important;
        height: 22px !important;

        font-size: 9px !important;
    }


    .jf-process-card-content {
        max-width: 270px !important;
    }


    .jf-process-card-content h3 {
        font-size: 14px !important;
    }


    .jf-process-card-content p {
        font-size: 11.5px !important;
    }


    .jf-process-line {
        top: 34px !important;
        bottom: 34px !important;
    }

}
/* =========================================================
   HOME LOAN OVERVIEW - MOBILE RESPONSIVE
========================================================= */

@media (max-width: 768px) {

    /* Main Section */
    .home-section {
        width: 100% !important;

        display: block !important;

        padding: 50px 15px !important;

        margin: 0 !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    /* Container */
    .home-section .container-tab {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 auto !important;

        padding: 0 !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       HEADING
    ===================================================== */

    .home-section-header {
        width: 100% !important;

        display: block !important;

        margin: 0 auto 22px !important;

        padding: 0 !important;

        text-align: center !important;
    }


    .home-section-header .finserv-trusted {
        width: 100% !important;

        margin: 0 0 10px !important;

        padding: 0 !important;

        font-size: 26px !important;

        line-height: 1.3 !important;

        font-weight: 600 !important;

        text-align: center !important;

        word-break: normal !important;

        overflow-wrap: normal !important;
    }


    .home-section-subtitle {
        width: 100% !important;

        margin: 0 auto !important;

        padding: 0 5px !important;

        font-size: 13px !important;

        line-height: 1.55 !important;

        text-align: center !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       INTRO TEXT
    ===================================================== */

    .home-overview-intro {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 auto 28px !important;

        padding: 0 5px !important;

        font-size: 13px !important;

        line-height: 1.65 !important;

        text-align: center !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       FEATURE CARDS
       IMPORTANT: overrides inline grid-template-columns
    ===================================================== */

    .home-feature-cards {
        width: 100% !important;

        max-width: 100% !important;

        display: grid !important;

        grid-template-columns: 1fr !important;

        grid-template-rows: none !important;

        gap: 16px !important;

        margin: 0 !important;

        padding: 0 !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       INDIVIDUAL CARD
    ===================================================== */

    .home-feature-card {
        width: 100% !important;

        min-width: 0 !important;

        max-width: 100% !important;

        display: block !important;

        padding: 22px 18px !important;

        margin: 0 !important;

        text-align: center !important;

        border-radius: 14px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }


    /* =====================================================
       ICON
    ===================================================== */

    .home-feature-icon {
        width: 58px !important;

        height: 58px !important;

        min-width: 58px !important;

        margin: 0 auto 13px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        font-size: 27px !important;

        line-height: 1 !important;

        border-radius: 50% !important;
    }


    /* =====================================================
       CARD TITLE
    ===================================================== */

    .home-feature-title {
        width: 100% !important;

        margin: 0 0 8px !important;

        padding: 0 !important;

        font-size: 17px !important;

        line-height: 1.4 !important;

        text-align: center !important;

        word-break: normal !important;

        overflow-wrap: break-word !important;
    }


    /* =====================================================
       CARD DESCRIPTION
    ===================================================== */

    .home-feature-description {
        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        font-size: 13px !important;

        line-height: 1.6 !important;

        text-align: center !important;

        word-break: normal !important;

        overflow-wrap: break-word !important;
    }

}


/* =========================================================
   SMALL MOBILE - 575px
========================================================= */

@media (max-width: 575px) {

    .home-section {
        padding: 42px 14px !important;
    }


    .home-section-header {
        margin-bottom: 19px !important;
    }


    .home-section-header .finserv-trusted {
        font-size: 23px !important;

        line-height: 1.3 !important;
    }


    .home-section-subtitle {
        padding: 0 !important;

        font-size: 12.5px !important;

        line-height: 1.55 !important;
    }


    .home-overview-intro {
        padding: 0 2px !important;

        margin-bottom: 24px !important;

        font-size: 12.5px !important;

        line-height: 1.65 !important;
    }


    .home-feature-cards {
        grid-template-columns: 1fr !important;

        gap: 14px !important;
    }


    .home-feature-card {
        padding: 20px 16px !important;

        border-radius: 13px !important;
    }


    .home-feature-icon {
        width: 54px !important;

        height: 54px !important;

        min-width: 54px !important;

        margin-bottom: 11px !important;

        font-size: 25px !important;
    }


    .home-feature-title {
        font-size: 16px !important;

        line-height: 1.4 !important;
    }


    .home-feature-description {
        font-size: 12.5px !important;

        line-height: 1.6 !important;
    }

}


/* =========================================================
   VERY SMALL MOBILE - 375px
========================================================= */

@media (max-width: 375px) {

    .home-section {
        padding: 38px 12px !important;
    }


    .home-section-header .finserv-trusted {
        font-size: 21px !important;
    }


    .home-section-subtitle {
        font-size: 12px !important;
    }


    .home-overview-intro {
        font-size: 12px !important;

        line-height: 1.6 !important;
    }


    .home-feature-card {
        padding: 18px 14px !important;
    }


    .home-feature-icon {
        width: 50px !important;

        height: 50px !important;

        min-width: 50px !important;

        font-size: 23px !important;
    }


    .home-feature-title {
        font-size: 15px !important;
    }


    .home-feature-description {
        font-size: 11.5px !important;
    }

}


/* =========================================================
   EXTRA SMALL - 320px
========================================================= */

@media (max-width: 320px) {

    .home-section {
        padding: 34px 10px !important;
    }


    .home-section-header .finserv-trusted {
        font-size: 20px !important;
    }


    .home-section-subtitle {
        font-size: 11.5px !important;
    }


    .home-overview-intro {
        font-size: 11.5px !important;
    }


    .home-feature-cards {
        gap: 12px !important;
    }


    .home-feature-card {
        padding: 17px 12px !important;
    }


    .home-feature-icon {
        width: 48px !important;

        height: 48px !important;

        min-width: 48px !important;

        font-size: 21px !important;
    }


    .home-feature-title {
        font-size: 14px !important;
    }


    .home-feature-description {
        font-size: 11px !important;

        line-height: 1.55 !important;
    }

}

/* =========================================================
   HOME LOAN HERO CSS
========================================================= */


/* =========================================================
   MAIN HERO
========================================================= */

.home-loan-hero {
    position: relative;
    width: 100%;
    min-height: 525px;

    background-image: url("{{ asset('theme/dhara-jfin/img/homeloan-page.webp') }}");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    overflow: hidden;
}

/* =========================================================
   DARK OVERLAY
========================================================= */

.home-loan-overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.45) 30%,
        rgba(0, 0, 0, 0.08) 65%,
        rgba(0, 0, 0, 0) 100%
    );

    z-index: 1;
}


/* =========================================================
   CONTAINER
========================================================= */

.home-loan-container {
    position: relative;
    z-index: 2;

    min-height: 525px;

    display: flex;
    align-items: center;
}


/* =========================================================
   CONTENT
========================================================= */

.home-loan-content {
    width: 50%;

    padding-left: 0;
    padding-top: 5px;
    padding-bottom: 5px;
}


/* =========================================================
   HEADING
========================================================= */

.home-loan-content h1 {
    margin: 0 0 8px 0;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 44px;
    line-height: 1.15;

    font-weight: 700;

    letter-spacing: 0;
}


.home-loan-content h1 span {
    color: #2f80ed;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.home-loan-content p {
    margin: 0 0 15px 0;

    color: rgba(255, 255, 255, 0.90);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;
    line-height: 1.5;

    font-weight: 400;
}


/* =========================================================
   APPLY NOW BUTTON
========================================================= */

.home-loan-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 86px;
    height: 35px;

    padding: 0 17px;

    background: #2878e5;

    color: #ffffff !important;

    border-radius: 4px;

    text-decoration: none !important;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;
    font-weight: 600;

    transition: all 0.3s ease;
}


.home-loan-btn:hover {
    background: #1265d2;

    color: #ffffff !important;

    transform: translateY(-1px);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.20);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .home-loan-hero {
        min-height: 525px;

        background-size: cover;

        background-position: center center;
    }


    .home-loan-container {
        min-height: 525px;
    }


    .home-loan-content {
        width: 50%;
    }


    .home-loan-content h1 {
        font-size: 44px;
    }


    .home-loan-content p {
        font-size: 15px;
    }
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .home-loan-hero {
        min-height: 450px;

        background-size: cover;

        background-position: center center;
    }


    .home-loan-container {
        min-height: 450px;
    }


    .home-loan-content {
        width: 50%;
    }


    .home-loan-content h1 {
        font-size: 36px;
    }


    .home-loan-content p {
        font-size: 14px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .home-loan-hero {

        min-height: 360px;

        /*
         * Keep the complete image visible better
         */
        background-size: 100% 100%;

        background-position: center center;

        background-repeat: no-repeat;
    }


    .home-loan-container {

        min-height: 360px;

        display: flex;

        align-items: center;

        padding-left: 30px;
        padding-right: 30px;

        box-sizing: border-box;
    }


    .home-loan-content {

        width: 52%;

        padding: 0;
    }


    .home-loan-content h1 {

        font-size: 29px;

        line-height: 1.18;

        margin-bottom: 9px;
    }


    .home-loan-content p {

        font-size: 12px;

        line-height: 1.45;

        margin-bottom: 15px;
    }


    .home-loan-btn {

        height: 35px;

        min-width: 86px;

        padding: 0 15px;

        font-size: 12px;
    }


    .home-loan-overlay {

        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.68) 0%,
            rgba(0, 0, 0, 0.43) 40%,
            rgba(0, 0, 0, 0.10) 75%,
            rgba(0, 0, 0, 0) 100%
        );
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .home-loan-hero {

        min-height: 300px;

        /*
         * IMPORTANT:
         * Cover was cropping the family image.
         * 100% 100% keeps the whole banner visible.
         */
        background-size: 100% 100%;

        background-position: center center;

        background-repeat: no-repeat;
    }


    .home-loan-container {

        min-height: 300px;

        width: 100%;

        display: flex;

        align-items: center;

        padding-top: 30px;
        padding-bottom: 30px;
        padding-left: 22px;
        padding-right: 22px;

        box-sizing: border-box;
    }


    .home-loan-content {

        width: 58%;

        padding: 0;
    }


    .home-loan-content h1 {

        font-size: 22px;

        line-height: 1.18;

        margin: 0 0 9px 0;
    }


    .home-loan-content p {

        font-size: 11px;

        line-height: 1.5;

        margin: 0 0 15px 0;
    }


    .home-loan-btn {

        height: 34px;

        min-width: 82px;

        padding: 0 15px;

        font-size: 11px;

        border-radius: 4px;
    }


    .home-loan-overlay {

        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.50) 42%,
            rgba(0, 0, 0, 0.12) 78%,
            rgba(0, 0, 0, 0.02) 100%
        );
    }
}


/* =========================================================
   IPHONE / SMALL MOBILE
========================================================= */

@media (max-width: 575px) {

    .home-loan-hero {

        min-height: 270px;

        /*
         * Full banner image visible
         */
        background-size: 100% 100%;

        background-position: center center;

        background-repeat: no-repeat;
    }


    .home-loan-container {

        min-height: 270px;

        padding-top: 25px;
        padding-bottom: 25px;
        padding-left: 18px;
        padding-right: 18px;

        align-items: center;
    }


    .home-loan-content {

        width: 58%;

        max-width: 230px;

        padding: 0;
    }


    .home-loan-content h1 {

        font-size: 20px;

        line-height: 1.18;

        margin-bottom: 8px;
    }


    .home-loan-content p {

        font-size: 10px;

        line-height: 1.45;

        margin-bottom: 13px;
    }


    .home-loan-btn {

        height: 33px;

        min-width: 82px;

        padding: 0 14px;

        font-size: 10px;
    }


    .home-loan-overlay {

        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.70) 0%,
            rgba(0, 0, 0, 0.48) 43%,
            rgba(0, 0, 0, 0.15) 75%,
            rgba(0, 0, 0, 0.02) 100%
        );
    }
}


/* =========================================================
   IPHONE SE / 375px
========================================================= */

@media (max-width: 375px) {

    .home-loan-hero {

        min-height: 245px;

        background-size: 100% 100%;

        background-position: center center;
    }


    .home-loan-container {

        min-height: 245px;

        padding-top: 22px;
        padding-bottom: 22px;
        padding-left: 15px;
        padding-right: 15px;
    }


    .home-loan-content {

        width: 58%;

        max-width: 210px;
    }


    .home-loan-content h1 {

        font-size: 18px;

        line-height: 1.17;

        margin-bottom: 7px;
    }


    .home-loan-content p {

        font-size: 9px;

        line-height: 1.4;

        margin-bottom: 12px;
    }


    .home-loan-btn {

        height: 31px;

        min-width: 78px;

        padding: 0 12px;

        font-size: 9px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .home-loan-hero {

        min-height: 230px;

        background-size: 100% 100%;

        background-position: center center;
    }


    .home-loan-container {

        min-height: 230px;

        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 13px;
        padding-right: 13px;
    }


    .home-loan-content {

        width: 58%;

        max-width: 195px;
    }


    .home-loan-content h1 {

        font-size: 17px;

        line-height: 1.17;
    }


    .home-loan-content p {

        font-size: 8.5px;

        line-height: 1.4;
    }


    .home-loan-btn {

        height: 30px;

        min-width: 75px;

        padding: 0 11px;

        font-size: 9px;
    }
}


/* =========================================================
   EXTRA SMALL DEVICES
========================================================= */

@media (max-width: 320px) {

    .home-loan-hero {

        min-height: 215px;

        background-size: 100% 100%;
    }


    .home-loan-container {

        min-height: 215px;

        padding-left: 12px;
        padding-right: 12px;
    }


    .home-loan-content {

        width: 57%;
    }


    .home-loan-content h1 {

        font-size: 16px;
    }


    .home-loan-content p {

        font-size: 8px;
    }


    .home-loan-btn {

        height: 29px;

        min-width: 72px;

        font-size: 8px;
    }
}

/* our feature section */



/* =========================================================
   MAIN SECTION
========================================================= */

.home-loan-features {
    width: 100%;

    background: #ffffff;

    padding: 75px 20px 80px;

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.home-loan-features-container {
    width: 100%;

    max-width: 1200px;

    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.home-loan-features-header {
    width: 100%;

    text-align: center;

    margin: 0 auto 45px;
}


/* SMALL TITLE */

.home-loan-eyebrow {
    margin-bottom: 8px;

    color: #2878e5;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.4;
}


/* MAIN TITLE */

.home-loan-features-header h2 {
    margin: 0 0 24px;

    color: #333333;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 32px;

    font-weight: 600;

    line-height: 1.25;
}


/* BLUE DREAM */

.home-loan-features-header h2 span {
    color: #00a9e8;

    font-weight: 700;
}


/* DESCRIPTION */

.home-loan-features-header p {
    max-width: 1100px;

    margin: 0 auto;

    color: #666666;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;

    font-weight: 400;

    line-height: 1.55;

    text-align: center;
}


/* =========================================================
   FEATURES WRAPPER
========================================================= */

.home-loan-features-wrapper {
    width: 100%;

    display: grid;

    grid-template-columns: 1fr 330px 1fr;

    column-gap: 40px;

    align-items: center;
}


/* =========================================================
   FEATURE COLUMNS
========================================================= */

.home-loan-feature-column {
    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 65px;
}


/* =========================================================
   FEATURE ITEM
========================================================= */

.home-loan-feature-item {
    width: 100%;

    display: flex;

    align-items: center;

    gap: 12px;
}


/* =========================================================
   ICON BOX
========================================================= */

.home-loan-feature-icon {
    flex: 0 0 36px;

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #eaf3ff;

    border-radius: 7px;

    color: #2878e5;

    font-size: 17px;
}


/* =========================================================
   FEATURE TEXT
========================================================= */

.home-loan-feature-text {
    flex: 1;

    min-width: 0;
}


.home-loan-feature-text h4 {
    margin: 0;

    color: #222222;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.3;
}


/* =========================================================
   CENTER
========================================================= */

.home-loan-center {
    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;
}


/* =========================================================
   HOUSE IMAGE
========================================================= */

.home-loan-house {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 30px;
}


.home-loan-house img {
    display: block;

    width: 100%;

    max-width: 340px;

    height: auto;

    object-fit: contain;
}


/* =========================================================
   APPLY BUTTON
========================================================= */

.home-loan-feature-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 157px;

    height: 46px;

    background: #2878e5;

    color: #ffffff !important;

    border-radius: 6px;

    text-decoration: none !important;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    font-weight: 600;

    transition: all 0.3s ease;
}


.home-loan-feature-btn:hover {
    background: #1265d2;

    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow: 0 5px 15px rgba(40, 120, 229, 0.25);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .home-loan-features {
        padding-top: 80px;

        padding-bottom: 90px;
    }


    .home-loan-features-container {
        max-width: 1250px;
    }


    .home-loan-features-header h2 {
        font-size: 34px;
    }


    .home-loan-features-header p {
        font-size: 15px;

        max-width: 1120px;
    }


    .home-loan-features-wrapper {
        grid-template-columns: 1fr 350px 1fr;

        column-gap: 45px;
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .home-loan-features {
        padding: 65px 25px 75px;
    }


    .home-loan-features-wrapper {
        grid-template-columns: 1fr 290px 1fr;

        column-gap: 30px;
    }


    .home-loan-feature-column {
        gap: 55px;
    }


    .home-loan-feature-text h4 {
        font-size: 13px;
    }


    .home-loan-house img {
        max-width: 290px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .home-loan-features {
        padding: 60px 25px 70px;
    }


    .home-loan-features-header {
        margin-bottom: 40px;
    }


    .home-loan-features-header h2 {
        font-size: 29px;

        margin-bottom: 20px;
    }


    .home-loan-features-header p {
        font-size: 14px;
    }


    .home-loan-features-wrapper {
        grid-template-columns: 1fr 230px 1fr;

        column-gap: 20px;
    }


    .home-loan-feature-column {
        gap: 55px;
    }


    .home-loan-feature-item {
        gap: 9px;
    }


    .home-loan-feature-icon {
        flex-basis: 34px;

        width: 34px;

        height: 34px;

        font-size: 15px;
    }


    .home-loan-feature-text h4 {
        font-size: 12px;
    }


    .home-loan-house img {
        max-width: 230px;
    }


    .home-loan-feature-btn {
        width: 140px;

        height: 43px;

        font-size: 13px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .home-loan-features {
        padding: 55px 20px 65px;
    }


    .home-loan-features-header {
        margin-bottom: 35px;
    }


    .home-loan-eyebrow {
        font-size: 14px;

        margin-bottom: 7px;
    }


    .home-loan-features-header h2 {
        font-size: 27px;

        line-height: 1.25;

        margin-bottom: 18px;
    }


    .home-loan-features-header p {
        font-size: 13px;

        line-height: 1.55;

        text-align: center;
    }


    /* =========================================
       MOBILE LAYOUT
    ========================================= */

    .home-loan-features-wrapper {
        display: flex;

        flex-direction: column;

        width: 100%;

        gap: 0;
    }


    /* CENTER IMAGE FIRST */

    .home-loan-center {
        order: 1;

        width: 100%;

        margin: 5px 0 35px;
    }


    .home-loan-house {
        margin-bottom: 25px;
    }


    .home-loan-house img {
        width: 85%;

        max-width: 330px;
    }


    .home-loan-feature-btn {
        width: 145px;

        height: 44px;

        font-size: 13px;
    }


    /* LEFT FEATURES */

    .home-loan-left-column {
        order: 2;
    }


    /* RIGHT FEATURES */

    .home-loan-right-column {
        order: 3;
    }


    .home-loan-feature-column {
        width: 100%;

        gap: 22px;

        margin-bottom: 22px;
    }


    .home-loan-feature-item {
        width: 100%;

        align-items: flex-start;

        gap: 12px;

        padding: 5px 0;
    }


    .home-loan-feature-icon {
        flex: 0 0 38px;

        width: 38px;

        height: 38px;

        font-size: 16px;
    }


    .home-loan-feature-text h4 {
        font-size: 13px;

        line-height: 1.4;
    }

}


/* =========================================================
   IPHONE 376 - 575
========================================================= */

@media (min-width: 376px) and (max-width: 575px) {

    .home-loan-features {
        padding:
            48px
            18px
            55px;
    }


    .home-loan-eyebrow {
        font-size: 13px;
    }


    .home-loan-features-header h2 {
        font-size: 24px;
    }


    .home-loan-features-header p {
        font-size: 12px;

        line-height: 1.55;
    }


    .home-loan-house img {
        width: 90%;

        max-width: 320px;
    }


    .home-loan-feature-column {
        gap: 18px;
    }


    .home-loan-feature-item {
        gap: 10px;
    }


    .home-loan-feature-icon {
        flex: 0 0 36px;

        width: 36px;

        height: 36px;

        font-size: 15px;
    }


    .home-loan-feature-text h4 {
        font-size: 12px;

        line-height: 1.4;
    }


    .home-loan-feature-btn {
        width: 140px;

        height: 42px;

        font-size: 12px;
    }

}


/* =========================================================
   IPHONE SE / 375px AND BELOW
========================================================= */

@media (max-width: 375px) {

    .home-loan-features {
        padding:
            42px
            15px
            50px;
    }


    .home-loan-eyebrow {
        font-size: 12px;
    }


    .home-loan-features-header h2 {
        font-size: 22px;

        margin-bottom: 15px;
    }


    .home-loan-features-header p {
        font-size: 11px;

        line-height: 1.55;
    }


    .home-loan-center {
        margin-bottom: 30px;
    }


    .home-loan-house {
        margin-bottom: 22px;
    }


    .home-loan-house img {
        width: 94%;

        max-width: 300px;
    }


    .home-loan-feature-column {
        gap: 16px;

        margin-bottom: 18px;
    }


    .home-loan-feature-item {
        gap: 9px;
    }


    .home-loan-feature-icon {
        flex: 0 0 34px;

        width: 34px;

        height: 34px;

        font-size: 14px;

        border-radius: 6px;
    }


    .home-loan-feature-text h4 {
        font-size: 11.5px;

        line-height: 1.4;
    }


    .home-loan-feature-btn {
        width: 135px;

        height: 40px;

        font-size: 11.5px;
    }

}


/* =========================================================
   VERY SMALL 320px
========================================================= */

@media (max-width: 320px) {

    .home-loan-features {
        padding-left: 12px;

        padding-right: 12px;
    }


    .home-loan-features-header h2 {
        font-size: 20px;
    }


    .home-loan-features-header p {
        font-size: 10.5px;
    }


    .home-loan-house img {
        width: 96%;
    }


    .home-loan-feature-text h4 {
        font-size: 11px;
    }

}


/* =========================================================
   SAFETY
========================================================= */

.home-loan-features img {
    max-width: 100%;
}



/* =========================================================
   MAIN SECTION
========================================================= */

.why-home-loan-section {
    width: 100%;

    background: #dce9fe;

    padding: 35px 25px 80px;

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.why-home-loan-container {
    width: 100%;

    max-width: 1200px;

    margin: 0 auto;
}


/* =========================================================
   TOP HEADER
========================================================= */

.why-home-loan-header {
    width: 100%;

    text-align: center;

    margin-bottom: 43px;
}


/* MAIN HEADING */

.why-home-loan-header h2 {
    margin: 0 0 4px;

    color: #333333;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 24px;

    font-weight: 600;

    line-height: 1.3;
}


/* BLUE SUBTITLE */

.why-home-loan-subtitle {
    margin-bottom: 14px;

    color: #2878e5;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.4;
}


/* DESCRIPTION */

.why-home-loan-header p {
    margin: 0 auto;

    max-width: 1050px;

    color: #666666;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.35;

    text-align: center;
}


/* =========================================================
   CARD GRID
========================================================= */

.home-loan-card-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 30px;

    align-items: stretch;
}


/* =========================================================
   CARD
========================================================= */

.home-loan-info-card {
    width: 100%;

    min-height: 205px;

    padding: 29px 22px 25px;

    background: #ffffff;

    border: 1px solid #286fff;

    border-radius: 15px;

    box-shadow:
        0 7px 18px rgba(40, 111, 255, 0.08);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* CARD HOVER */

.home-loan-info-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(40, 111, 255, 0.13);
}


/* =========================================================
   ICON BOX
========================================================= */

.home-loan-card-icon {
    width: 39px;

    height: 39px;

    margin-bottom: 23px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e8f1ff;

    border-radius: 4px;

    color: #2878e5;

    font-size: 18px;
}


/* =========================================================
   CARD TITLE
========================================================= */

.home-loan-info-card h3 {
    margin: 0 0 7px;

    color: #363636;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 21px;

    font-weight: 600;

    line-height: 1.25;
}


/* =========================================================
   CARD DESCRIPTION
========================================================= */

.home-loan-info-card p {
    margin: 0;

    color: #666666;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.3;
}


/* =========================================================
   BENEFITS HEADER
========================================================= */

.home-loan-benefits-header {
    width: 100%;

    text-align: center;

    margin-top: 78px;

    margin-bottom: 44px;
}


.home-loan-benefits-header h2 {
    margin: 0 0 7px;

    color: #333333;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 24px;

    font-weight: 600;

    line-height: 1.3;
}


.home-loan-benefits-header p {
    margin: 0;

    color: #666666;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.4;
}


/* =========================================================
   BENEFITS GRID
========================================================= */

.benefits-grid {
    margin-bottom: 0;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .why-home-loan-container {
        max-width: 1200px;
    }


    .why-home-loan-section {
        padding-top: 35px;
    }


    .home-loan-info-card {
        min-height: 205px;
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .why-home-loan-section {
        padding-left: 25px;
        padding-right: 25px;
    }


    .home-loan-card-grid {
        gap: 25px;
    }


    .home-loan-info-card {
        padding: 27px 20px 24px;
    }


    .home-loan-info-card h3 {
        font-size: 19px;
    }


    .home-loan-info-card p {
        font-size: 13px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .why-home-loan-section {
        padding:
            35px
            20px
            65px;
    }


    .why-home-loan-header {
        margin-bottom: 35px;
    }


    .why-home-loan-header h2 {
        font-size: 23px;
    }


    .why-home-loan-subtitle {
        font-size: 13px;
    }


    .why-home-loan-header p {
        font-size: 12px;
    }


    .home-loan-card-grid {
        gap: 18px;
    }


    .home-loan-info-card {
        min-height: 195px;

        padding: 25px 18px;
    }


    .home-loan-card-icon {
        width: 37px;

        height: 37px;

        margin-bottom: 20px;
    }


    .home-loan-info-card h3 {
        font-size: 17px;
    }


    .home-loan-info-card p {
        font-size: 12px;
    }


    .home-loan-benefits-header {
        margin-top: 65px;

        margin-bottom: 35px;
    }


    .home-loan-benefits-header h2 {
        font-size: 23px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .why-home-loan-section {
        padding:
            45px
            18px
            60px;
    }


    .why-home-loan-header {
        margin-bottom: 30px;
    }


    .why-home-loan-header h2 {
        font-size: 22px;

        line-height: 1.3;
    }


    .why-home-loan-subtitle {
        margin-top: 5px;

        margin-bottom: 13px;

        font-size: 12px;

        line-height: 1.45;
    }


    .why-home-loan-header p {
        max-width: 500px;

        font-size: 11.5px;

        line-height: 1.5;
    }


    /* REMOVE BR ON MOBILE */

    .desktop-break {
        display: none;
    }


    /* ONE CARD PER ROW */

    .home-loan-card-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    /* CARD */

    .home-loan-info-card {
        min-height: 0;

        padding:
            23px
            20px
            22px;

        border-radius: 13px;
    }


    /* ICON */

    .home-loan-card-icon {
        width: 38px;

        height: 38px;

        margin-bottom: 18px;

        font-size: 17px;
    }


    /* TITLE */

    .home-loan-info-card h3 {
        font-size: 18px;

        line-height: 1.3;

        margin-bottom: 8px;
    }


    /* DESCRIPTION */

    .home-loan-info-card p {
        font-size: 12px;

        line-height: 1.45;
    }


    /* BENEFITS */

    .home-loan-benefits-header {
        margin-top: 58px;

        margin-bottom: 30px;
    }


    .home-loan-benefits-header h2 {
        font-size: 22px;

        line-height: 1.3;
    }


    .home-loan-benefits-header p {
        font-size: 11.5px;

        line-height: 1.45;
    }

}


/* =========================================================
   IPHONE 376 - 575
========================================================= */

@media (min-width: 376px) and (max-width: 575px) {

    .why-home-loan-section {
        padding:
            42px
            17px
            55px;
    }


    .why-home-loan-header h2 {
        font-size: 21px;
    }


    .why-home-loan-subtitle {
        font-size: 11.5px;
    }


    .why-home-loan-header p {
        font-size: 11px;
    }


    .home-loan-card-grid {
        gap: 16px;
    }


    .home-loan-info-card {
        padding:
            22px
            18px
            21px;
    }


    .home-loan-card-icon {
        width: 37px;

        height: 37px;

        margin-bottom: 17px;

        font-size: 16px;
    }


    .home-loan-info-card h3 {
        font-size: 17px;
    }


    .home-loan-info-card p {
        font-size: 11.5px;
    }


    .home-loan-benefits-header {
        margin-top: 52px;
    }


    .home-loan-benefits-header h2 {
        font-size: 21px;
    }

}


/* =========================================================
   IPHONE SE / 375px
========================================================= */

@media (max-width: 375px) {

    .why-home-loan-section {
        padding:
            38px
            14px
            50px;
    }


    .why-home-loan-header {
        margin-bottom: 26px;
    }


    .why-home-loan-header h2 {
        font-size: 20px;
    }


    .why-home-loan-subtitle {
        font-size: 11px;
    }


    .why-home-loan-header p {
        font-size: 10.5px;

        line-height: 1.5;
    }


    .home-loan-card-grid {
        gap: 15px;
    }


    .home-loan-info-card {
        padding:
            20px
            16px
            20px;

        border-radius: 12px;
    }


    .home-loan-card-icon {
        width: 35px;

        height: 35px;

        margin-bottom: 16px;

        font-size: 15px;
    }


    .home-loan-info-card h3 {
        font-size: 16px;

        line-height: 1.3;
    }


    .home-loan-info-card p {
        font-size: 11px;

        line-height: 1.45;
    }


    .home-loan-benefits-header {
        margin-top: 48px;

        margin-bottom: 26px;
    }


    .home-loan-benefits-header h2 {
        font-size: 20px;
    }


    .home-loan-benefits-header p {
        font-size: 10.5px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 320px) {

    .why-home-loan-section {
        padding-left: 12px;

        padding-right: 12px;
    }


    .why-home-loan-header h2 {
        font-size: 19px;
    }


    .why-home-loan-subtitle {
        font-size: 10.5px;
    }


    .why-home-loan-header p {
        font-size: 10px;
    }


    .home-loan-info-card h3 {
        font-size: 15px;
    }


    .home-loan-info-card p {
        font-size: 10.5px;
    }

}



/* =========================================================
   MAIN SECTION
========================================================= */

.jfin-home-benefits-section {

    width: 100%;

    background: #ffffff;

    padding: 30px 24px 60px;

    overflow: hidden;
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.jfin-home-benefits-container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.jfin-home-benefits-header {

    width: 100%;

    text-align: center;

    margin-bottom: 42px;
}


/* =========================================================
   HEADING
========================================================= */

.jfin-home-benefits-header h2 {

    margin: 0 0 7px;

    color: #295cab;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 25px;

    font-weight: 600;

    line-height: 1.25;
}


/* CYAN PART */

.jfin-home-benefits-header h2 strong {

    color: #00abeb;

    font-weight: 700;
}


/* =========================================================
   SUBTEXT
========================================================= */

.jfin-home-benefits-header p {

    margin: 0;

    color: #666666;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.4;
}


/* =========================================================
   CARD GRID
========================================================= */

.jfin-home-benefits-grid {

    width: 100%;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    column-gap: 30px;

    row-gap: 30px;
}


/* =========================================================
   CARD
========================================================= */

.jfin-benefit-card {

    width: 100%;

    min-height: 205px;

    padding: 29px 22px 24px;

    background: #ffffff;

    border: 1px solid #286fff;

    border-radius: 15px;

    box-sizing: border-box;

    box-shadow:
        0 5px 15px rgba(41, 92, 171, 0.04);

    transition: all 0.25s ease;
}


/* =========================================================
   CARD HOVER
========================================================= */

.jfin-benefit-card:hover {

    transform: translateY(-3px);

    box-shadow:
        0 9px 22px rgba(41, 92, 171, 0.10);
}


/* =========================================================
   ICON BOX
========================================================= */

.jfin-benefit-icon {

    width: 39px;

    height: 39px;

    margin-bottom: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e6f0ff;

    border-radius: 4px;

    color: #2878e5;

    font-size: 18px;
}


/* =========================================================
   CARD TITLE
========================================================= */

.jfin-benefit-card h3 {

    margin: 0 0 7px;

    color: #363636;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 21px;

    font-weight: 600;

    line-height: 1.25;
}


/* =========================================================
   CARD DESCRIPTION
========================================================= */

.jfin-benefit-card p {

    margin: 0;

    color: #666666;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.3;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .jfin-home-benefits-container {

        max-width: 1200px;
    }


    .jfin-home-benefits-section {

        padding-top: 30px;

        padding-bottom: 65px;
    }


    .jfin-benefit-card {

        min-height: 205px;
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .jfin-home-benefits-section {

        padding-left: 25px;

        padding-right: 25px;
    }


    .jfin-home-benefits-grid {

        gap: 25px;
    }


    .jfin-benefit-card {

        padding: 27px 20px 24px;

        min-height: 205px;
    }


    .jfin-benefit-card h3 {

        font-size: 19px;
    }


    .jfin-benefit-card p {

        font-size: 13px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .jfin-home-benefits-section {

        padding:
            30px
            20px
            55px;
    }


    .jfin-home-benefits-header {

        margin-bottom: 35px;
    }


    .jfin-home-benefits-header h2 {

        font-size: 23px;
    }


    .jfin-home-benefits-header p {

        font-size: 12px;
    }


    .jfin-home-benefits-grid {

        column-gap: 18px;

        row-gap: 20px;
    }


    .jfin-benefit-card {

        min-height: 195px;

        padding:
            24px
            18px
            22px;

        border-radius: 13px;
    }


    .jfin-benefit-icon {

        width: 37px;

        height: 37px;

        margin-bottom: 19px;

        font-size: 16px;
    }


    .jfin-benefit-card h3 {

        font-size: 17px;

        line-height: 1.3;
    }


    .jfin-benefit-card p {

        font-size: 12px;

        line-height: 1.4;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .jfin-home-benefits-section {

        padding:
            42px
            18px
            55px;
    }


    .jfin-home-benefits-header {

        margin-bottom: 30px;
    }


    .jfin-home-benefits-header h2 {

        font-size: 22px;

        line-height: 1.3;
    }


    .jfin-home-benefits-header p {

        font-size: 11.5px;

        line-height: 1.5;
    }


    /* =====================================================
       ONE CARD PER ROW
    ===================================================== */

    .jfin-home-benefits-grid {

        display: grid;

        grid-template-columns: 1fr;

        gap: 17px;
    }


    /* =====================================================
       CARD
    ===================================================== */

    .jfin-benefit-card {

        min-height: auto;

        padding:
            23px
            20px
            23px;

        border-radius: 13px;
    }


    /* =====================================================
       ICON
    ===================================================== */

    .jfin-benefit-icon {

        width: 38px;

        height: 38px;

        margin-bottom: 17px;

        font-size: 17px;
    }


    /* =====================================================
       TITLE
    ===================================================== */

    .jfin-benefit-card h3 {

        font-size: 18px;

        line-height: 1.3;

        margin-bottom: 8px;
    }


    /* =====================================================
       DESCRIPTION
    ===================================================== */

    .jfin-benefit-card p {

        font-size: 12px;

        line-height: 1.5;
    }


    .jfin-desktop-only {

        display: none;
    }

}


/* =========================================================
   IPHONE 376px - 575px
========================================================= */

@media (min-width: 376px) and (max-width: 575px) {

    .jfin-home-benefits-section {

        padding:
            40px
            17px
            50px;
    }


    .jfin-home-benefits-header {

        margin-bottom: 27px;
    }


    .jfin-home-benefits-header h2 {

        font-size: 21px;
    }


    .jfin-home-benefits-header p {

        font-size: 11px;
    }


    .jfin-home-benefits-grid {

        gap: 15px;
    }


    .jfin-benefit-card {

        padding:
            21px
            18px
            21px;
    }


    .jfin-benefit-icon {

        width: 37px;

        height: 37px;

        margin-bottom: 16px;

        font-size: 16px;
    }


    .jfin-benefit-card h3 {

        font-size: 17px;
    }


    .jfin-benefit-card p {

        font-size: 11.5px;

        line-height: 1.5;
    }

}


/* =========================================================
   IPHONE SE / 375px
========================================================= */

@media (max-width: 375px) {

    .jfin-home-benefits-section {

        padding:
            36px
            14px
            48px;
    }


    .jfin-home-benefits-header {

        margin-bottom: 25px;
    }


    .jfin-home-benefits-header h2 {

        font-size: 20px;
    }


    .jfin-home-benefits-header p {

        font-size: 10.5px;

        line-height: 1.5;
    }


    .jfin-home-benefits-grid {

        gap: 14px;
    }


    .jfin-benefit-card {

        padding:
            20px
            16px
            20px;

        border-radius: 12px;
    }


    .jfin-benefit-icon {

        width: 35px;

        height: 35px;

        margin-bottom: 15px;

        font-size: 15px;
    }


    .jfin-benefit-card h3 {

        font-size: 16px;

        line-height: 1.3;
    }


    .jfin-benefit-card p {

        font-size: 11px;

        line-height: 1.5;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 320px) {

    .jfin-home-benefits-section {

        padding-left: 12px;

        padding-right: 12px;
    }


    .jfin-home-benefits-header h2 {

        font-size: 19px;
    }


    .jfin-home-benefits-header p {

        font-size: 10px;
    }


    .jfin-benefit-card h3 {

        font-size: 15px;
    }


    .jfin-benefit-card p {

        font-size: 10.5px;
    }

}




/* =========================================================
   MAIN SECTION
========================================================= */

.home-loan-emi-section {

    width: 100%;

    background: #edf4fd;

    padding: 45px 25px 60px;

    box-sizing: border-box;

    overflow: hidden;
}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.home-loan-emi-wrapper {

    width: 100%;

    max-width: 1120px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 70px;

    box-sizing: border-box;
}


/* =========================================================
   LEFT SIDE
========================================================= */

.home-loan-emi-left {

    flex: 1;

    min-width: 0;
}


.home-loan-emi-left h2 {

    margin: 0 0 12px;

    color: #333333;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 34px;

    font-weight: 600;

    line-height: 1.15;

    letter-spacing: -0.5px;
}


.home-loan-emi-left p {

    margin: 0 0 22px;

    color: #707070;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    line-height: 1.4;
}


/* =========================================================
   BUTTON
========================================================= */

.home-loan-emi-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    min-width: 215px;

    height: 48px;

    padding: 0 22px;

    background: #2878e5;

    color: #ffffff !important;

    border-radius: 7px;

    text-decoration: none !important;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    font-weight: 600;

    box-sizing: border-box;

    transition:
        all .25s ease;
}


.home-loan-emi-btn:hover {

    background: #1d66cc;

    color: #ffffff !important;

    transform: translateY(-1px);

    box-shadow:
        0 5px 14px rgba(40,120,229,.20);
}


.home-loan-emi-btn span {

    font-size: 23px;

    line-height: 1;
}


/* =========================================================
   RIGHT EMI CARD - LARGE
========================================================= */

.home-loan-emi-box {

    flex: 0 0 560px;

    width: 560px;

    min-height: 275px;

    padding: 36px 34px 30px;

    box-sizing: border-box;

    border-radius: 17px;

    background:
        linear-gradient(
            115deg,
            #2878e5 0%,
            #493ddd 48%,
            #b500d9 100%
        );

    color: #ffffff;

    box-shadow:
        0 7px 20px rgba(41,92,171,.13);
}


/* =========================================================
   CARD TITLE
========================================================= */

.emi-box-title {

    margin-bottom: 32px;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;

    font-weight: 400;
}


/* =========================================================
   MAIN EMI
========================================================= */

.emi-amount {

    margin-bottom: 12px;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 38px;

    font-weight: 700;

    line-height: 1;
}


.emi-amount span {

    margin-left: 3px;

    font-size: 18px;

    font-weight: 400;
}


/* =========================================================
   LOAN DETAILS
========================================================= */

.emi-info {

    margin-bottom: 34px;

    color: rgba(255,255,255,.92);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    line-height: 1.4;
}


/* =========================================================
   BOTTOM VALUES
========================================================= */

.emi-bottom {

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 25px;
}


.emi-value {

    display: flex;

    flex-direction: column;

    min-width: 0;
}


.emi-value strong {

    margin-bottom: 6px;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 24px;

    font-weight: 700;

    line-height: 1;
}


.emi-value small {

    color: rgba(255,255,255,.90);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    line-height: 1.2;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .home-loan-emi-wrapper {

        max-width: 1120px;

        gap: 75px;
    }


    .home-loan-emi-box {

        flex-basis: 580px;

        width: 580px;

        min-height: 285px;

        padding:
            38px
            36px
            32px;
    }


    .home-loan-emi-left h2 {

        font-size: 35px;
    }

}


/* =========================================================
   DESKTOP 992 - 1199
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .home-loan-emi-wrapper {

        max-width: 1000px;

        gap: 45px;
    }


    .home-loan-emi-box {

        flex-basis: 520px;

        width: 520px;

        min-height: 265px;

        padding:
            32px
            30px
            28px;
    }


    .home-loan-emi-left h2 {

        font-size: 31px;
    }


    .emi-amount {

        font-size: 35px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .home-loan-emi-section {

        padding:
            40px
            25px
            55px;
    }


    .home-loan-emi-wrapper {

        gap: 30px;

        max-width: 900px;
    }


    .home-loan-emi-left h2 {

        font-size: 28px;
    }


    .home-loan-emi-left p {

        font-size: 13px;
    }


    .home-loan-emi-box {

        flex-basis: 450px;

        width: 450px;

        min-height: 250px;

        padding:
            29px
            25px
            26px;
    }


    .emi-box-title {

        font-size: 13px;

        margin-bottom: 27px;
    }


    .emi-amount {

        font-size: 30px;
    }


    .emi-amount span {

        font-size: 15px;
    }


    .emi-info {

        font-size: 10px;

        margin-bottom: 28px;
    }


    .emi-bottom {

        gap: 12px;
    }


    .emi-value strong {

        font-size: 19px;
    }


    .emi-value small {

        font-size: 10px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .home-loan-emi-section {

        padding:
            38px
            15px
            48px;
    }


    .home-loan-emi-wrapper {

        flex-direction: column;

        align-items: stretch;

        gap: 30px;
    }


    .home-loan-emi-left {

        width: 100%;

        text-align: center;
    }


    .home-loan-emi-left h2 {

        font-size: 27px;

        line-height: 1.2;

        letter-spacing: 0;
    }


    .home-loan-emi-left p {

        font-size: 13px;

        line-height: 1.45;
    }


    .home-loan-emi-btn {

        min-width: 205px;

        height: 46px;

        font-size: 13px;
    }


    /* LARGE CARD ON MOBILE */

    .home-loan-emi-box {

        width: 100%;

        min-width: 0;

        flex: none;

        min-height: 260px;

        padding:
            29px
            23px
            27px;

        border-radius: 15px;
    }


    .emi-box-title {

        font-size: 13px;

        margin-bottom: 27px;
    }


    .emi-amount {

        font-size: 30px;
    }


    .emi-amount span {

        font-size: 15px;
    }


    .emi-info {

        font-size: 10px;

        margin-bottom: 29px;
    }


    .emi-bottom {

        gap: 10px;
    }


    .emi-value strong {

        font-size: 18px;
    }


    .emi-value small {

        font-size: 10px;
    }

}


/* =========================================================
   IPHONE 376 - 575
========================================================= */

@media (min-width: 376px) and (max-width: 575px) {

    .home-loan-emi-section {

        padding:
            35px
            14px
            45px;
    }


    .home-loan-emi-wrapper {

        gap: 28px;
    }


    .home-loan-emi-left h2 {

        font-size: 25px;
    }


    .home-loan-emi-left p {

        font-size: 12px;
    }


    .home-loan-emi-box {

        min-height: 255px;

        padding:
            27px
            19px
            25px;
    }


    .emi-box-title {

        font-size: 12px;

        margin-bottom: 24px;
    }


    .emi-amount {

        font-size: 27px;
    }


    .emi-amount span {

        font-size: 14px;
    }


    .emi-info {

        font-size: 9px;

        margin-bottom: 26px;

        white-space: nowrap;
    }


    .emi-bottom {

        gap: 7px;
    }


    .emi-value strong {

        font-size: 17px;
    }


    .emi-value small {

        font-size: 9px;
    }

}


/* =========================================================
   IPHONE SE / SMALL MOBILE
========================================================= */

@media (max-width: 375px) {

    .home-loan-emi-section {

        padding:
            32px
            11px
            42px;
    }


    .home-loan-emi-wrapper {

        gap: 25px;
    }


    .home-loan-emi-left h2 {

        font-size: 23px;
    }


    .home-loan-emi-left p {

        font-size: 11px;

        line-height: 1.45;
    }


    .home-loan-emi-btn {

        min-width: 195px;

        height: 44px;

        font-size: 12px;
    }


    .home-loan-emi-box {

        min-height: 245px;

        padding:
            24px
            15px
            22px;

        border-radius: 13px;
    }


    .emi-box-title {

        font-size: 10px;

        margin-bottom: 21px;
    }


    .emi-amount {

        font-size: 23px;
    }


    .emi-amount span {

        font-size: 12px;
    }


    .emi-info {

        font-size: 8px;

        margin-bottom: 23px;

        white-space: nowrap;
    }


    .emi-bottom {

        gap: 4px;
    }


    .emi-value strong {

        font-size: 14px;
    }


    .emi-value small {

        font-size: 8px;
    }

}
/* =========================================================
   CSS
========================================================= */


/* =========================================================
   MAIN SECTION
========================================================= */

.jfin-eligibility-section {
    width: 100%;
    background: #ffffff;
    padding: 35px 25px 75px;
    box-sizing: border-box;
    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.jfin-eligibility-container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.jfin-eligibility-header {

    text-align: center;

    margin-bottom: 28px;
}


.jfin-eligibility-header h2 {

    margin: 0 0 5px;

    color: #295cab;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 25px;

    font-weight: 600;

    line-height: 1.3;
}


.jfin-eligibility-header h2 strong {

    color: #00abeb;

    font-weight: 700;
}


.jfin-eligibility-header p {

    margin: 0;

    color: #666666;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;

    line-height: 1.5;
}


/* =========================================================
   TABS OUTER
========================================================= */

.jfin-eligibility-tabs {

    width: 525px;

    max-width: 100%;

    margin: 0 auto 46px;

    padding: 4px;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    background: #eaf2fc;

    border-radius: 8px;

    box-sizing: border-box;
}


/* =========================================================
   TAB BUTTON
========================================================= */

.jfin-eligibility-tab {

    min-height: 40px;

    padding: 9px 12px;

    border: none;

    outline: none;

    background: transparent;

    border-radius: 7px;

    color: #333333;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;

    font-weight: 500;

    cursor: pointer;

    transition: all 0.25s ease;
}


/* ACTIVE TAB */

.jfin-eligibility-tab.active {

    background: #2878e5;

    color: #ffffff;

    box-shadow:
        0 2px 5px rgba(40, 120, 229, 0.15);
}


/* =========================================================
   TAB CONTENT
========================================================= */

.jfin-eligibility-tab-content {

    display: none;

    animation: jfinEligibilityFade 0.25s ease;
}


.jfin-eligibility-tab-content.active {

    display: block;
}


@keyframes jfinEligibilityFade {

    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   MAIN TWO COLUMN GRID
========================================================= */

.jfin-eligibility-grid {

    width: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 45px;

    align-items: start;
}


/* =========================================================
   COLUMN TITLE
========================================================= */

.jfin-column-title {

    margin: 0 0 20px;

    color: #333333;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 18px;

    font-weight: 500;

    line-height: 1.3;
}


/* =========================================================
   CHECKLIST
========================================================= */

.jfin-checklist {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 22px;
}


/* =========================================================
   CHECK ITEM
========================================================= */

.jfin-check-item {

    width: 100%;

    min-height: 69px;

    padding: 13px 16px;

    display: flex;

    align-items: center;

    gap: 23px;

    background: #ffffff;

    border: 1px solid #477cff;

    border-radius: 11px;

    box-sizing: border-box;

    color: #333333;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;

    line-height: 1.4;

    box-shadow:
        0 4px 12px rgba(41, 92, 171, 0.04);
}


/* =========================================================
   CHECK ICON BOX
========================================================= */

.jfin-check-icon {

    flex: 0 0 38px;

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e8f1ff;

    border-radius: 4px;

    color: #2878e5;

    font-size: 19px;
}


/* =========================================================
   DOCUMENT COLUMN
========================================================= */

.jfin-documents-column {

    width: 100%;
}


/* =========================================================
   DOCUMENT ACCORDION
========================================================= */

.jfin-document-accordion {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 22px;
}


/* =========================================================
   DETAILS
========================================================= */

.jfin-document-accordion details {

    width: 100%;

    background: #ffffff;

    border: 1px solid #477cff;

    border-radius: 11px;

    overflow: hidden;

    box-sizing: border-box;

    box-shadow:
        0 4px 12px rgba(41, 92, 171, 0.04);
}


/* =========================================================
   SUMMARY
========================================================= */

.jfin-document-accordion summary {

    min-height: 67px;

    padding: 18px 21px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    color: #333333;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;

    font-weight: 600;

    line-height: 1.35;

    cursor: pointer;

    list-style: none;

    box-sizing: border-box;
}


/* REMOVE DEFAULT MARKER */

.jfin-document-accordion summary::-webkit-details-marker {

    display: none;
}


/* =========================================================
   CHEVRON
========================================================= */

.jfin-document-accordion summary i {

    flex-shrink: 0;

    color: #444444;

    font-size: 11px;

    transition: transform 0.25s ease;
}


/* ROTATE WHEN OPEN */

.jfin-document-accordion details[open] summary i {

    transform: rotate(180deg);
}


/* =========================================================
   DOCUMENT CONTENT
========================================================= */

.jfin-document-content {

    padding:
        0
        21px
        18px;
}


/* =========================================================
   DOCUMENT LIST
========================================================= */

.jfin-document-content ul {

    margin: 0;

    padding-left: 20px;
}


.jfin-document-content li {

    margin-bottom: 13px;

    padding-left: 1px;

    color: #555555;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    line-height: 1.45;
}


.jfin-document-content li:last-child {

    margin-bottom: 0;
}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .jfin-eligibility-section {

        padding:
            35px
            20px
            60px;
    }


    .jfin-eligibility-grid {

        gap: 25px;
    }


    .jfin-eligibility-tabs {

        margin-bottom: 38px;
    }


    .jfin-column-title {

        font-size: 17px;
    }


    .jfin-check-item {

        font-size: 13px;

        gap: 15px;

        padding-left: 12px;

        padding-right: 12px;
    }


    .jfin-check-icon {

        flex-basis: 36px;

        width: 36px;

        height: 36px;

        font-size: 17px;
    }


    .jfin-document-accordion summary {

        font-size: 13px;

        padding-left: 16px;

        padding-right: 16px;
    }


    .jfin-document-content {

        padding-left: 16px;

        padding-right: 16px;
    }


    .jfin-document-content li {

        font-size: 12px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .jfin-eligibility-section {

        padding:
            40px
            15px
            55px;
    }


    .jfin-eligibility-header {

        margin-bottom: 24px;
    }


    .jfin-eligibility-header h2 {

        font-size: 22px;

        line-height: 1.3;
    }


    .jfin-eligibility-header p {

        font-size: 11.5px;

        line-height: 1.5;
    }


    /* =====================================================
       TABS
    ===================================================== */

    .jfin-eligibility-tabs {

        width: 100%;

        margin-bottom: 30px;

        padding: 3px;

        border-radius: 7px;
    }


    .jfin-eligibility-tab {

        min-height: 40px;

        padding:
            8px
            5px;

        font-size: 11px;

        line-height: 1.25;
    }


    /* =====================================================
       ONE COLUMN
    ===================================================== */

    .jfin-eligibility-grid {

        grid-template-columns: 1fr;

        gap: 34px;
    }


    /* =====================================================
       TITLES
    ===================================================== */

    .jfin-column-title {

        margin-bottom: 15px;

        font-size: 17px;
    }


    /* =====================================================
       CHECKLIST
    ===================================================== */

    .jfin-checklist {

        gap: 14px;
    }


    .jfin-check-item {

        min-height: 62px;

        padding:
            11px
            12px;

        gap: 13px;

        border-radius: 10px;

        font-size: 13px;

        line-height: 1.4;
    }


    .jfin-check-icon {

        flex: 0 0 36px;

        width: 36px;

        height: 36px;

        font-size: 17px;
    }


    /* =====================================================
       DOCUMENTS
    ===================================================== */

    .jfin-document-accordion {

        gap: 13px;
    }


    .jfin-document-accordion details {

        border-radius: 10px;
    }


    .jfin-document-accordion summary {

        min-height: 58px;

        padding:
            15px;

        font-size: 13px;

        line-height: 1.4;
    }


    .jfin-document-content {

        padding:
            0
            15px
            16px;
    }


    .jfin-document-content ul {

        padding-left: 18px;
    }


    .jfin-document-content li {

        margin-bottom: 10px;

        font-size: 12px;

        line-height: 1.5;
    }

}


/* =========================================================
   IPHONE 376 - 575
========================================================= */

@media (min-width: 376px) and (max-width: 575px) {

    .jfin-eligibility-section {

        padding:
            38px
            14px
            50px;
    }


    .jfin-eligibility-header h2 {

        font-size: 21px;
    }


    .jfin-eligibility-header p {

        font-size: 11px;
    }


    .jfin-eligibility-tab {

        font-size: 10.5px;
    }


    .jfin-check-item {

        font-size: 12px;
    }


    .jfin-document-accordion summary {

        font-size: 12px;
    }


    .jfin-document-content li {

        font-size: 11.5px;
    }

}


/* =========================================================
   IPHONE SE / 375
========================================================= */

@media (max-width: 375px) {

    .jfin-eligibility-section {

        padding:
            35px
            12px
            48px;
    }


    .jfin-eligibility-header h2 {

        font-size: 20px;
    }


    .jfin-eligibility-header p {

        font-size: 10.5px;
    }


    .jfin-eligibility-tabs {

        margin-bottom: 25px;
    }


    .jfin-eligibility-tab {

        min-height: 38px;

        padding:
            7px
            3px;

        font-size: 10px;
    }


    .jfin-check-item {

        min-height: 58px;

        padding:
            10px;

        gap: 10px;

        font-size: 11.5px;
    }


    .jfin-check-icon {

        flex-basis: 34px;

        width: 34px;

        height: 34px;

        font-size: 15px;
    }


    .jfin-column-title {

        font-size: 16px;
    }


    .jfin-document-accordion summary {

        min-height: 55px;

        padding:
            13px;

        font-size: 11.5px;
    }


    .jfin-document-content {

        padding:
            0
            13px
            14px;
    }


    .jfin-document-content li {

        font-size: 11px;

        line-height: 1.5;
    }

}


/* =========================================================
   MAIN HERO
========================================================= */

.home-loan-hero {
    position: relative;
    width: 100%;
    min-height: 525px;

    background-image: url("{{ asset('theme/dhara-jfin/img/homeloan-page.webp') }}");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    overflow: hidden;
}


/* =========================================================
   DARK OVERLAY
========================================================= */

.home-loan-overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.45) 30%,
        rgba(0, 0, 0, 0.08) 65%,
        rgba(0, 0, 0, 0) 100%
    );

    z-index: 1;
}


/* =========================================================
   CONTAINER
========================================================= */

.home-loan-container {
    position: relative;
    z-index: 2;

    min-height: 525px;

    display: flex;
    align-items: center;
}


/* =========================================================
   CONTENT
========================================================= */

.home-loan-content {
    width: 50%;

    padding-left: 0;
    padding-top: 5px;
    padding-bottom: 5px;
}


/* =========================================================
   HEADING
========================================================= */

.home-loan-content h1 {
    margin: 0 0 8px 0;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 44px;
    line-height: 1.15;

    font-weight: 700;

    letter-spacing: 0;
}


.home-loan-content h1 span {
    color: #2f80ed;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.home-loan-content p {
    margin: 0 0 15px 0;

    color: rgba(255, 255, 255, 0.90);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;
    line-height: 1.5;

    font-weight: 400;
}


/* =========================================================
   APPLY NOW BUTTON
========================================================= */

.home-loan-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 86px;
    height: 35px;

    padding: 0 17px;

    background: #2878e5;

    color: #ffffff !important;

    border-radius: 4px;

    text-decoration: none !important;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;
    font-weight: 600;

    transition: all 0.3s ease;
}


.home-loan-btn:hover {
    background: #1265d2;

    color: #ffffff !important;

    transform: translateY(-1px);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.20);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .home-loan-hero {
        min-height: 525px;

        background-size: cover;

        background-position: center center;
    }


    .home-loan-container {
        min-height: 525px;
    }


    .home-loan-content {
        width: 50%;
    }


    .home-loan-content h1 {
        font-size: 44px;
    }


    .home-loan-content p {
        font-size: 15px;
    }
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .home-loan-hero {
        min-height: 450px;

        background-size: cover;

        background-position: center center;
    }


    .home-loan-container {
        min-height: 450px;
    }


    .home-loan-content {
        width: 50%;
    }


    .home-loan-content h1 {
        font-size: 36px;
    }


    .home-loan-content p {
        font-size: 14px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .home-loan-hero {

        min-height: 360px;

        /*
         * Keep the complete image visible better
         */
        background-size: 100% 100%;

        background-position: center center;

        background-repeat: no-repeat;
    }


    .home-loan-container {

        min-height: 360px;

        display: flex;

        align-items: center;

        padding-left: 30px;
        padding-right: 30px;

        box-sizing: border-box;
    }


    .home-loan-content {

        width: 52%;

        padding: 0;
    }


    .home-loan-content h1 {

        font-size: 29px;

        line-height: 1.18;

        margin-bottom: 9px;
    }


    .home-loan-content p {

        font-size: 12px;

        line-height: 1.45;

        margin-bottom: 15px;
    }


    .home-loan-btn {

        height: 35px;

        min-width: 86px;

        padding: 0 15px;

        font-size: 12px;
    }


    .home-loan-overlay {

        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.68) 0%,
            rgba(0, 0, 0, 0.43) 40%,
            rgba(0, 0, 0, 0.10) 75%,
            rgba(0, 0, 0, 0) 100%
        );
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .home-loan-hero {

        min-height: 300px;

        /*
         * IMPORTANT:
         * Cover was cropping the family image.
         * 100% 100% keeps the whole banner visible.
         */
        background-size: 100% 100%;

        background-position: center center;

        background-repeat: no-repeat;
    }


    .home-loan-container {

        min-height: 300px;

        width: 100%;

        display: flex;

        align-items: center;

        padding-top: 30px;
        padding-bottom: 30px;
        padding-left: 22px;
        padding-right: 22px;

        box-sizing: border-box;
    }


    .home-loan-content {

        width: 58%;

        padding: 0;
    }


    .home-loan-content h1 {

        font-size: 22px;

        line-height: 1.18;

        margin: 0 0 9px 0;
    }


    .home-loan-content p {

        font-size: 11px;

        line-height: 1.5;

        margin: 0 0 15px 0;
    }


    .home-loan-btn {

        height: 34px;

        min-width: 82px;

        padding: 0 15px;

        font-size: 11px;

        border-radius: 4px;
    }


    .home-loan-overlay {

        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.50) 42%,
            rgba(0, 0, 0, 0.12) 78%,
            rgba(0, 0, 0, 0.02) 100%
        );
    }
}


/* =========================================================
   IPHONE / SMALL MOBILE
========================================================= */

@media (max-width: 575px) {

    .home-loan-hero {

        min-height: 270px;

        /*
         * Full banner image visible
         */
        background-size: 100% 100%;

        background-position: center center;

        background-repeat: no-repeat;
    }


    .home-loan-container {

        min-height: 270px;

        padding-top: 25px;
        padding-bottom: 25px;
        padding-left: 18px;
        padding-right: 18px;

        align-items: center;
    }


    .home-loan-content {

        width: 58%;

        max-width: 230px;

        padding: 0;
    }


    .home-loan-content h1 {

        font-size: 20px;

        line-height: 1.18;

        margin-bottom: 8px;
    }


    .home-loan-content p {

        font-size: 10px;

        line-height: 1.45;

        margin-bottom: 13px;
    }


    .home-loan-btn {

        height: 33px;

        min-width: 82px;

        padding: 0 14px;

        font-size: 10px;
    }


    .home-loan-overlay {

        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.70) 0%,
            rgba(0, 0, 0, 0.48) 43%,
            rgba(0, 0, 0, 0.15) 75%,
            rgba(0, 0, 0, 0.02) 100%
        );
    }
}


/* =========================================================
   IPHONE SE / 375px
========================================================= */

@media (max-width: 375px) {

    .home-loan-hero {

        min-height: 245px;

        background-size: 100% 100%;

        background-position: center center;
    }


    .home-loan-container {

        min-height: 245px;

        padding-top: 22px;
        padding-bottom: 22px;
        padding-left: 15px;
        padding-right: 15px;
    }


    .home-loan-content {

        width: 58%;

        max-width: 210px;
    }


    .home-loan-content h1 {

        font-size: 18px;

        line-height: 1.17;

        margin-bottom: 7px;
    }


    .home-loan-content p {

        font-size: 9px;

        line-height: 1.4;

        margin-bottom: 12px;
    }


    .home-loan-btn {

        height: 31px;

        min-width: 78px;

        padding: 0 12px;

        font-size: 9px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .home-loan-hero {

        min-height: 230px;

        background-size: 100% 100%;

        background-position: center center;
    }


    .home-loan-container {

        min-height: 230px;

        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 13px;
        padding-right: 13px;
    }


    .home-loan-content {

        width: 58%;

        max-width: 195px;
    }


    .home-loan-content h1 {

        font-size: 17px;

        line-height: 1.17;
    }


    .home-loan-content p {

        font-size: 8.5px;

        line-height: 1.4;
    }


    .home-loan-btn {

        height: 30px;

        min-width: 75px;

        padding: 0 11px;

        font-size: 9px;
    }
}


/* =========================================================
   EXTRA SMALL DEVICES
========================================================= */

@media (max-width: 320px) {

    .home-loan-hero {

        min-height: 215px;

        background-size: 100% 100%;
    }


    .home-loan-container {

        min-height: 215px;

        padding-left: 12px;
        padding-right: 12px;
    }


    .home-loan-content {

        width: 57%;
    }


    .home-loan-content h1 {

        font-size: 16px;
    }


    .home-loan-content p {

        font-size: 8px;
    }


    .home-loan-btn {

        height: 29px;

        min-width: 72px;

        font-size: 8px;
    }
}


/* loan against property css */


/* =========================================================
   MAIN HERO
========================================================= */



/* =========================================================
   DARK OVERLAY
========================================================= */

.home-loan-overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.45) 30%,
        rgba(0, 0, 0, 0.08) 65%,
        rgba(0, 0, 0, 0) 100%
    );

    z-index: 1;
}


/* =========================================================
   CONTAINER
========================================================= */

.home-loan-container {
    position: relative;
    z-index: 2;

    min-height: 525px;

    display: flex;
    align-items: center;
}


/* =========================================================
   CONTENT
========================================================= */

.home-loan-content {
    width: 50%;

    padding-left: 0;
    padding-top: 5px;
    padding-bottom: 5px;
}


/* =========================================================
   HEADING
========================================================= */

.home-loan-content h1 {
    margin: 0 0 8px 0;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 44px;
    line-height: 1.15;

    font-weight: 700;

    letter-spacing: 0;
}


.home-loan-content h1 span {
    color: #2f80ed;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.home-loan-content p {
    margin: 0 0 15px 0;

    color: rgba(255, 255, 255, 0.90);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;
    line-height: 1.5;

    font-weight: 400;
}


/* =========================================================
   APPLY NOW BUTTON
========================================================= */

.home-loan-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 86px;
    height: 35px;

    padding: 0 17px;

    background: #2878e5;

    color: #ffffff !important;

    border-radius: 4px;

    text-decoration: none !important;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;
    font-weight: 600;

    transition: all 0.3s ease;
}


.home-loan-btn:hover {
    background: #1265d2;

    color: #ffffff !important;

    transform: translateY(-1px);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.20);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .home-loan-hero {
        min-height: 525px;

        background-size: cover;

        background-position: center center;
    }


    .home-loan-container {
        min-height: 525px;
    }


    .home-loan-content {
        width: 50%;
    }


    .home-loan-content h1 {
        font-size: 44px;
    }


    .home-loan-content p {
        font-size: 15px;
    }
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .home-loan-hero {
        min-height: 450px;

        background-size: cover;

        background-position: center center;
    }


    .home-loan-container {
        min-height: 450px;
    }


    .home-loan-content {
        width: 50%;
    }


    .home-loan-content h1 {
        font-size: 36px;
    }


    .home-loan-content p {
        font-size: 14px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .home-loan-hero {

        min-height: 360px;

        /*
         * Keep the complete image visible better
         */
        background-size: 100% 100%;

        background-position: center center;

        background-repeat: no-repeat;
    }


    .home-loan-container {

        min-height: 360px;

        display: flex;

        align-items: center;

        padding-left: 30px;
        padding-right: 30px;

        box-sizing: border-box;
    }


    .home-loan-content {

        width: 52%;

        padding: 0;
    }


    .home-loan-content h1 {

        font-size: 29px;

        line-height: 1.18;

        margin-bottom: 9px;
    }


    .home-loan-content p {

        font-size: 12px;

        line-height: 1.45;

        margin-bottom: 15px;
    }


    .home-loan-btn {

        height: 35px;

        min-width: 86px;

        padding: 0 15px;

        font-size: 12px;
    }


    .home-loan-overlay {

        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.68) 0%,
            rgba(0, 0, 0, 0.43) 40%,
            rgba(0, 0, 0, 0.10) 75%,
            rgba(0, 0, 0, 0) 100%
        );
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .home-loan-hero {

        min-height: 300px;

        /*
         * IMPORTANT:
         * Cover was cropping the family image.
         * 100% 100% keeps the whole banner visible.
         */
        background-size: 100% 100%;

        background-position: center center;

        background-repeat: no-repeat;
    }


    .home-loan-container {

        min-height: 300px;

        width: 100%;

        display: flex;

        align-items: center;

        padding-top: 30px;
        padding-bottom: 30px;
        padding-left: 22px;
        padding-right: 22px;

        box-sizing: border-box;
    }


    .home-loan-content {

        width: 58%;

        padding: 0;
    }


    .home-loan-content h1 {

        font-size: 22px;

        line-height: 1.18;

        margin: 0 0 9px 0;
    }


    .home-loan-content p {

        font-size: 11px;

        line-height: 1.5;

        margin: 0 0 15px 0;
    }


    .home-loan-btn {

        height: 34px;

        min-width: 82px;

        padding: 0 15px;

        font-size: 11px;

        border-radius: 4px;
    }


    .home-loan-overlay {

        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.50) 42%,
            rgba(0, 0, 0, 0.12) 78%,
            rgba(0, 0, 0, 0.02) 100%
        );
    }
}


/* =========================================================
   IPHONE / SMALL MOBILE
========================================================= */

@media (max-width: 575px) {

    .home-loan-hero {

        min-height: 270px;

        /*
         * Full banner image visible
         */
        background-size: 100% 100%;

        background-position: center center;

        background-repeat: no-repeat;
    }


    .home-loan-container {

        min-height: 270px;

        padding-top: 25px;
        padding-bottom: 25px;
        padding-left: 18px;
        padding-right: 18px;

        align-items: center;
    }


    .home-loan-content {

        width: 58%;

        max-width: 230px;

        padding: 0;
    }


    .home-loan-content h1 {

        font-size: 20px;

        line-height: 1.18;

        margin-bottom: 8px;
    }


    .home-loan-content p {

        font-size: 10px;

        line-height: 1.45;

        margin-bottom: 13px;
    }


    .home-loan-btn {

        height: 33px;

        min-width: 82px;

        padding: 0 14px;

        font-size: 10px;
    }


    .home-loan-overlay {

        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.70) 0%,
            rgba(0, 0, 0, 0.48) 43%,
            rgba(0, 0, 0, 0.15) 75%,
            rgba(0, 0, 0, 0.02) 100%
        );
    }
}


/* =========================================================
   IPHONE SE / 375px
========================================================= */

@media (max-width: 375px) {

    .home-loan-hero {

        min-height: 245px;

        background-size: 100% 100%;

        background-position: center center;
    }


    .home-loan-container {

        min-height: 245px;

        padding-top: 22px;
        padding-bottom: 22px;
        padding-left: 15px;
        padding-right: 15px;
    }


    .home-loan-content {

        width: 58%;

        max-width: 210px;
    }


    .home-loan-content h1 {

        font-size: 18px;

        line-height: 1.17;

        margin-bottom: 7px;
    }


    .home-loan-content p {

        font-size: 9px;

        line-height: 1.4;

        margin-bottom: 12px;
    }


    .home-loan-btn {

        height: 31px;

        min-width: 78px;

        padding: 0 12px;

        font-size: 9px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .home-loan-hero {

        min-height: 230px;

        background-size: 100% 100%;

        background-position: center center;
    }


    .home-loan-container {

        min-height: 230px;

        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 13px;
        padding-right: 13px;
    }


    .home-loan-content {

        width: 58%;

        max-width: 195px;
    }


    .home-loan-content h1 {

        font-size: 17px;

        line-height: 1.17;
    }


    .home-loan-content p {

        font-size: 8.5px;

        line-height: 1.4;
    }


    .home-loan-btn {

        height: 30px;

        min-width: 75px;

        padding: 0 11px;

        font-size: 9px;
    }
}


/* =========================================================
   EXTRA SMALL DEVICES
========================================================= */

@media (max-width: 320px) {

    .home-loan-hero {

        min-height: 215px;

        background-size: 100% 100%;
    }


    .home-loan-container {

        min-height: 215px;

        padding-left: 12px;
        padding-right: 12px;
    }


    .home-loan-content {

        width: 57%;
    }


    .home-loan-content h1 {

        font-size: 16px;
    }


    .home-loan-content p {

        font-size: 8px;
    }


    .home-loan-btn {

        height: 29px;

        min-width: 72px;

        font-size: 8px;
    }
}


/* =========================================================
   MAIN SECTION
========================================================= */

.property-loan-why {
    width: 100%;
    background: #f8fafc;
    padding: 25px 20px 60px;
    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.property-loan-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.property-loan-heading {
    text-align: center;
    margin-bottom: 48px;
}

.property-loan-heading h2 {
    margin: 0 0 4px;

    font-size: 26px;
    line-height: 1.3;

    font-weight: 600;
    color: #333333;
}


/* FIRST PARAGRAPH */

.property-loan-intro {
    margin: 0 auto 14px;

    font-size: 15px;
    line-height: 1.25;

    font-weight: 400;
}


/* BLUE TEXT */

.blue-text {
    color: #2875df;
}


/* SECOND PARAGRAPH */

.property-loan-description {
    margin: 0 auto;

    color: #777777;

    font-size: 15px;
    line-height: 1.35;

    font-weight: 400;
}


/* =========================================================
   CARDS GRID
========================================================= */

.property-loan-cards {
    display: grid;

    grid-template-columns: repeat(6, 1fr);

    column-gap: 32px;
    row-gap: 34px;

    align-items: start;
}


/* =========================================================
   CARD
========================================================= */

.property-loan-card {

    grid-column: span 2;

    min-height: 218px;

    padding: 32px 24px 25px;

    background: #ffffff;

    border: 1px solid #4d7ff0;

    border-radius: 16px;

    box-shadow: 0 8px 22px rgba(38, 102, 220, 0.12);

    box-sizing: border-box;

    transition: all 0.3s ease;
}


/* =========================================================
   BOTTOM CARDS
========================================================= */

/*
   4th card starts around 18%
   5th card starts around 50%
   This creates the centered 2-card row
*/

.property-loan-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.property-loan-card:nth-child(5) {
    grid-column: 4 / span 2;
}


/* =========================================================
   ICON BOX
========================================================= */

.property-loan-icon {

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #e6efff;

    border-radius: 5px;

    margin-bottom: 25px;
}


/* ICON */

.property-loan-icon i {

    font-size: 19px;

    color: #2875df;
}


/* =========================================================
   CARD TITLE
========================================================= */

.property-loan-card h3 {

    margin: 0 0 8px;

    color: #3b3b3b;

    font-size: 22px;

    line-height: 1.2;

    font-weight: 600;
}


/* =========================================================
   CARD DESCRIPTION
========================================================= */

.property-loan-card p {

    margin: 0;

    color: #707070;

    font-size: 15px;

    line-height: 1.25;

    font-weight: 400;
}


/* =========================================================
   HOVER
========================================================= */

.property-loan-card:hover {

    transform: translateY(-3px);

    box-shadow: 0 12px 28px rgba(38, 102, 220, 0.17);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .property-loan-cards {

        grid-template-columns: repeat(2, 1fr);

        gap: 25px;

    }

    .property-loan-card,
    .property-loan-card:nth-child(4),
    .property-loan-card:nth-child(5) {

        grid-column: auto;

    }

    .property-loan-card:last-child {

        grid-column: 1 / -1;

        max-width: calc(50% - 12px);

        margin: 0 auto;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .property-loan-why {

        padding: 30px 15px 45px;

    }


    .property-loan-heading {

        margin-bottom: 30px;

    }


    .property-loan-heading h2 {

        font-size: 23px;

    }


    .property-loan-intro {

        font-size: 14px;

        line-height: 1.45;

    }


    .property-loan-description {

        font-size: 14px;

        line-height: 1.45;

    }


    .desktop-only {

        display: none;

    }


    .property-loan-cards {

        display: flex;

        flex-direction: column;

        gap: 20px;

    }


    .property-loan-card,
    .property-loan-card:nth-child(4),
    .property-loan-card:nth-child(5) {

        width: 100%;

        max-width: 100%;

        min-height: auto;

        margin: 0;

        padding: 25px 20px;

    }


    .property-loan-card h3 {

        font-size: 20px;

    }


    .property-loan-card p {

        font-size: 14px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .property-loan-heading h2 {

        font-size: 21px;

    }


    .property-loan-card {

        border-radius: 14px;

    }


    .property-loan-card h3 {

        font-size: 19px;

    }

}

    /* =========================================================
   PROPERTY OVERVIEW - RESPONSIVE CSS
========================================================= */

.property-overview-section {
    width: 100%;
    padding: 35px 20px 55px;
    background: #f8fafc;
    overflow: hidden;
    box-sizing: border-box;
}

.property-overview-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.property-overview-heading {
    text-align: center;
    margin-bottom: 45px;
}

.property-overview-heading h4 {
    margin-bottom: 8px;
}

.property-overview-heading h2 {
    margin-bottom: 10px;
}

.property-overview-heading p {
    margin: 0 auto;
    max-width: 1100px;
    color: #777;
    font-size: 15px;
    line-height: 1.45;
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.property-overview-content {
    display: grid;
    grid-template-columns: 1fr 340px 1fr;
    align-items: center;
    gap: 25px;
}


/* =========================================================
   FEATURES
========================================================= */

.property-features {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 350px;
}

.property-feature {
    display: flex;
    align-items: center;
    gap: 12px;
}

.property-feature-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #e5efff;
    border-radius: 6px;

    color: #2875df;
}

.property-feature-icon i {
    font-size: 18px;
    color: #2875df;
}

.property-feature-text {
    color: #252525;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 500;
}


/* =========================================================
   CENTER IMAGE
========================================================= */

.property-overview-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.property-image-wrapper {
    width: 340px;
    height: 250px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.property-main-image {
    display: block;
    width: 100%;
    max-width: 340px;
    height: auto;
    object-fit: contain;
}


/* =========================================================
   APPLY BUTTON
========================================================= */

.property-apply-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 168px;
    height: 50px;

    margin-top: 5px;

    background: #2875df;
    color: #fff;

    border-radius: 8px;

    text-decoration: none;

    font-size: 15px;
    font-weight: 600;

    transition: 0.3s ease;
}

.property-apply-btn:hover {
    background: #1f64c5;
    color: #fff;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .property-overview-section {
        padding: 35px 20px 50px;
    }

    .property-overview-content {
        grid-template-columns: 1fr 280px 1fr;
        gap: 15px;
    }

    .property-features {
        height: 320px;
    }

    .property-image-wrapper {
        width: 280px;
        height: 220px;
    }

    .property-main-image {
        max-width: 280px;
    }

    .property-feature-text {
        font-size: 13px;
    }

    .property-feature-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .property-overview-heading p {
        font-size: 14px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .property-overview-section {
        padding: 30px 15px 45px;
    }

    .property-overview-container {
        width: 100%;
    }


    /* HEADING */

    .property-overview-heading {
        margin-bottom: 25px;
    }

    .property-overview-heading h4 {
        font-size: 14px;
        margin-bottom: 7px;
    }

    .property-overview-heading h2 {
        font-size: 23px;
        line-height: 1.3;
        margin-bottom: 12px;
    }

    .property-overview-heading p {
        width: 100%;
        font-size: 14px;
        line-height: 1.5;
    }


    /* REMOVE DESKTOP BR */

    .desktop-break {
        display: none;
    }


    /* =====================================================
       MOBILE CONTENT
    ===================================================== */

    .property-overview-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 20px;
    }


    /* CENTER IMAGE FIRST */

    .property-overview-center {
        order: 1;
        width: 100%;
    }


    /* LEFT FEATURES */

    .property-features-left {
        order: 2;
    }


    /* RIGHT FEATURES */

    .property-features-right {
        order: 3;
    }


    /* =====================================================
       IMAGE
    ===================================================== */

    .property-image-wrapper {
        width: 100%;
        max-width: 320px;
        height: 220px;
        margin: 0 auto;
    }

    .property-main-image {
        width: 100%;
        max-width: 320px;
        height: auto;
    }


    /* =====================================================
       BUTTON
    ===================================================== */

    .property-apply-btn {
        width: 165px;
        height: 48px;
        margin: 0 auto;
    }


    /* =====================================================
       FEATURES
    ===================================================== */

    .property-features {
        width: 100%;
        height: auto;

        display: flex;
        flex-direction: column;

        gap: 18px;
    }

    .property-feature {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .property-feature-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
    }

    .property-feature-text {
        font-size: 14px;
        line-height: 1.35;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .property-overview-section {
        padding: 25px 12px 40px;
    }

    .property-overview-heading h4 {
        font-size: 13px;
    }

    .property-overview-heading h2 {
        font-size: 20px;
    }

    .property-overview-heading p {
        font-size: 13px;
        line-height: 1.5;
    }


    .property-image-wrapper {
        max-width: 285px;
        height: 195px;
    }

    .property-main-image {
        max-width: 285px;
    }


    .property-feature {
        align-items: flex-start;
    }

    .property-feature-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .property-feature-icon i {
        font-size: 17px;
    }

    .property-feature-text {
        font-size: 13px;
        line-height: 1.4;
        padding-top: 2px;
    }


    .property-apply-btn {
        width: 155px;
        height: 46px;
        font-size: 14px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .property-overview-heading h2 {
        font-size: 19px;
    }

    .property-overview-heading p {
        font-size: 12.5px;
    }

    .property-image-wrapper {
        max-width: 260px;
        height: 180px;
    }

    .property-main-image {
        max-width: 260px;
    }

    .property-feature-text {
        font-size: 12.5px;
    }
}

/* =========================================================
   PROPERTY OVERVIEW - MOBILE FIX
========================================================= */

@media (max-width: 767px) {

    .property-overview-section {
        width: 100% !important;
        padding: 25px 15px 40px !important;
        margin: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .property-overview-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }


    /* =====================================================
       HEADING
    ===================================================== */

    .property-overview-heading {
        width: 100% !important;
        text-align: center !important;
        margin: 0 0 25px !important;
        padding: 0 !important;
    }

    .property-overview-heading h4 {
        margin: 0 0 7px !important;
        font-size: 14px !important;
        line-height: 1.3 !important;
    }

    .property-overview-heading h2 {
        margin: 0 0 12px !important;
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    .property-overview-heading p {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }

    .desktop-break {
        display: none !important;
    }


    /* =====================================================
       MAIN CONTENT
    ===================================================== */

    .property-overview-content {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }


    /* =====================================================
       CENTER IMAGE SECTION
    ===================================================== */

    .property-overview-center {
        order: 1 !important;

        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* IMAGE BOX */

    .property-image-wrapper {
        width: 100% !important;
        max-width: 300px !important;

        height: 210px !important;
        min-height: 210px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        overflow: hidden !important;
        box-sizing: border-box !important;
    }


    /* ACTUAL IMAGE */

    .property-main-image {
        display: block !important;

        width: auto !important;
        max-width: 100% !important;

        height: 205px !important;
        max-height: 205px !important;

        object-fit: contain !important;

        margin: 0 auto !important;
        padding: 0 !important;
    }


    /* =====================================================
       APPLY BUTTON
    ===================================================== */

    .property-apply-btn {
        order: 2 !important;

        width: 210px !important;
        max-width: 210px !important;

        height: 48px !important;
        min-height: 48px !important;

        margin: 5px auto 28px !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: #2875df !important;
        color: #ffffff !important;

        border-radius: 8px !important;

        font-size: 16px !important;
        line-height: 1 !important;
        font-weight: 600 !important;

        text-decoration: none !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       LEFT + RIGHT FEATURES
    ===================================================== */

    .property-features {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 16px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .property-features-left {
        order: 3 !important;
    }

    .property-features-right {
        order: 4 !important;

        margin-top: 16px !important;
    }


    /* =====================================================
       EACH FEATURE
    ===================================================== */

    .property-feature {
        width: 100% !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;

        gap: 14px !important;

        margin: 0 !important;
        padding: 0 !important;

        min-height: 50px !important;
    }


    /* =====================================================
       ICON
    ===================================================== */

    .property-feature-icon {
        width: 46px !important;
        min-width: 46px !important;

        height: 46px !important;
        min-height: 46px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: #e5efff !important;

        border-radius: 7px !important;

        margin: 0 !important;
        padding: 0 !important;

        flex-shrink: 0 !important;
    }


    .property-feature-icon i {
        font-size: 19px !important;
        line-height: 1 !important;
        color: #2875df !important;
    }


    /* =====================================================
       FEATURE TEXT
    ===================================================== */

    .property-feature-text {
        width: auto !important;
        max-width: calc(100% - 60px) !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #252525 !important;

        font-size: 14px !important;
        line-height: 1.4 !important;

        font-weight: 500 !important;

        text-align: left !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
    }


    /* REMOVE FORCED DESKTOP LINE BREAKS */

    .property-feature-text br {
        display: none !important;
    }

}


/* =========================================================
   SMALL MOBILE - 480px
========================================================= */

@media (max-width: 480px) {

    .property-overview-section {
        padding: 22px 15px 35px !important;
    }


    .property-overview-heading {
        margin-bottom: 20px !important;
    }


    .property-overview-heading h4 {
        font-size: 13px !important;
    }


    .property-overview-heading h2 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }


    .property-overview-heading p {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
    }


    /* SMALLER IMAGE */

    .property-image-wrapper {
        width: 100% !important;
        max-width: 280px !important;

        height: 190px !important;
        min-height: 190px !important;
    }


    .property-main-image {
        height: 185px !important;
        max-height: 185px !important;
        max-width: 280px !important;
    }


    /* BUTTON */

    .property-apply-btn {
        width: 200px !important;
        max-width: 200px !important;

        height: 47px !important;
        min-height: 47px !important;

        margin-top: 5px !important;
        margin-bottom: 25px !important;

        font-size: 15px !important;
    }


    /* FEATURES */

    .property-features {
        gap: 14px !important;
    }


    .property-feature {
        gap: 12px !important;
        min-height: 48px !important;
    }


    .property-feature-icon {
        width: 43px !important;
        min-width: 43px !important;

        height: 43px !important;
        min-height: 43px !important;
    }


    .property-feature-icon i {
        font-size: 18px !important;
    }


    .property-feature-text {
        font-size: 13.5px !important;
        line-height: 1.4 !important;

        max-width: calc(100% - 55px) !important;
    }

}


/* =========================================================
   VERY SMALL MOBILE - 360px
========================================================= */

@media (max-width: 360px) {

    .property-overview-heading h2 {
        font-size: 19px !important;
    }


    .property-overview-heading p {
        font-size: 12px !important;
    }


    .property-image-wrapper {
        max-width: 255px !important;
        height: 175px !important;
        min-height: 175px !important;
    }


    .property-main-image {
        max-width: 255px !important;
        height: 170px !important;
        max-height: 170px !important;
    }


    .property-apply-btn {
        width: 185px !important;
        max-width: 185px !important;
    }


    .property-feature-icon {
        width: 40px !important;
        min-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;
    }


    .property-feature-text {
        font-size: 13px !important;
        max-width: calc(100% - 52px) !important;
    }

}




/* =========================================================
   MAIN SECTION
========================================================= */

.property-benefits-section {

    width: 100%;

    background: #f8fafc;

    padding: 25px 15px 70px;

    overflow: hidden;

    box-sizing: border-box;
}


/* =========================================================
   CONTAINER
========================================================= */

.property-benefits-container {

    width: 100%;

    max-width: 1250px;

    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.property-benefits-heading {

    text-align: center;

    margin-bottom: 48px;
}


.property-benefits-heading h2 {

    margin: 0 0 5px;

    color: #333333;

    font-size: 26px;

    line-height: 1.3;

    font-weight: 600;
}


.property-benefits-heading p {

    margin: 0;

    color: #707070;

    font-size: 15px;

    line-height: 1.4;

    font-weight: 400;
}


/* =========================================================
   GRID
========================================================= */

.property-benefits-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    column-gap: 32px;

    row-gap: 50px;

    width: 100%;
}


/* =========================================================
   CARD
========================================================= */

.property-benefit-card {

    width: 100%;

    min-height: 220px;

    box-sizing: border-box;

    padding: 32px 24px 25px;

    background: #ffffff;

    border: 1px solid #4d7ff0;

    border-radius: 16px;

    box-shadow: 0 7px 20px rgba(40, 117, 223, 0.10);

    transition: all 0.3s ease;
}


/* =========================================================
   ICON BOX
========================================================= */

.property-benefit-icon {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e5efff;

    border-radius: 5px;

    margin-bottom: 26px;
}


.property-benefit-icon i {

    color: #2875df;

    font-size: 19px;

    line-height: 1;
}


/* =========================================================
   CARD TITLE
========================================================= */

.property-benefit-card h3 {

    margin: 0 0 8px;

    color: #3b3b3b;

    font-size: 22px;

    line-height: 1.25;

    font-weight: 600;
}


/* =========================================================
   CARD TEXT
========================================================= */

.property-benefit-card p {

    margin: 0;

    color: #555555;

    font-size: 15px;

    line-height: 1.25;

    font-weight: 400;
}


/* =========================================================
   HOVER
========================================================= */

.property-benefit-card:hover {

    transform: translateY(-3px);

    box-shadow: 0 12px 28px rgba(40, 117, 223, 0.16);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .property-benefits-section {

        padding: 30px 20px 55px;
    }

    .property-benefits-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 25px;
    }

    .property-benefit-card {

        min-height: 220px;
    }

    .property-benefit-card h3 {

        font-size: 20px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .property-benefits-section {

        padding: 28px 15px 45px;
    }


    /* HEADING */

    .property-benefits-heading {

        margin-bottom: 30px;
    }


    .property-benefits-heading h2 {

        font-size: 22px;

        line-height: 1.3;
    }


    .property-benefits-heading p {

        font-size: 14px;
    }


    /* ONE CARD PER ROW */

    .property-benefits-grid {

        display: flex;

        flex-direction: column;

        gap: 20px;
    }


    /* CARD */

    .property-benefit-card {

        width: 100%;

        min-height: auto;

        padding: 25px 20px;

        border-radius: 14px;
    }


    /* ICON */

    .property-benefit-icon {

        width: 42px;

        height: 42px;

        margin-bottom: 22px;
    }


    /* TITLE */

    .property-benefit-card h3 {

        font-size: 20px;

        line-height: 1.3;

        margin-bottom: 8px;
    }


    /* TEXT */

    .property-benefit-card p {

        font-size: 14px;

        line-height: 1.45;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .property-benefits-section {

        padding: 25px 12px 40px;
    }


    .property-benefits-heading h2 {

        font-size: 20px;
    }


    .property-benefits-heading p {

        font-size: 13px;
    }


    .property-benefit-card {

        padding: 23px 18px;

        border-radius: 13px;
    }


    .property-benefit-icon {

        width: 40px;

        height: 40px;

        margin-bottom: 20px;
    }


    .property-benefit-icon i {

        font-size: 18px;
    }


    .property-benefit-card h3 {

        font-size: 19px;
    }


    .property-benefit-card p {

        font-size: 13.5px;

        line-height: 1.45;
    }

}





/* =========================================================
   MAIN SECTION
========================================================= */

.property-eligibility-section {
    width: 100%;
    padding: 30px 15px 70px;
    background: #f8fafc;
    box-sizing: border-box;
    overflow: hidden;
}

.property-eligibility-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
}


/* =========================================================
   TABS
========================================================= */

.property-eligibility-tabs {

    width: 100%;

    display: grid;

    grid-template-columns:
        1fr
        1fr
        1.25fr
        1.25fr
        1.2fr;

    gap: 0;

    padding: 4px;

    background: #eaf2fc;

    border-radius: 10px;

    box-sizing: border-box;

    margin-bottom: 48px;
}


/* TAB */

.property-eligibility-tab {

    border: 0;

    background: transparent;

    color: #333;

    min-height: 64px;

    padding: 8px 12px;

    border-radius: 8px;

    font-size: 15px;

    line-height: 1.15;

    font-weight: 500;

    cursor: pointer;

    transition: all 0.25s ease;

    font-family: inherit;
}


/* ACTIVE TAB */

.property-eligibility-tab.active {

    background: #2875df;

    color: #ffffff;

    box-shadow: 0 3px 8px rgba(40,117,223,0.20);
}


/* HOVER */

.property-eligibility-tab:not(.active):hover {

    background: rgba(40,117,223,0.08);

    color: #2875df;
}


/* =========================================================
   TAB CONTENT
========================================================= */

.property-eligibility-tab-content {

    display: none;

    width: 100%;
}

.property-eligibility-tab-content.active {

    display: block;
}


/* =========================================================
   TWO COLUMNS
========================================================= */

.property-eligibility-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 48px;

    align-items: start;
}


/* =========================================================
   COLUMN TITLE
========================================================= */

.property-column-title {

    margin: 0 0 20px;

    color: #333333;

    font-size: 20px;

    line-height: 1.3;

    font-weight: 500;
}


/* =========================================================
   CRITERIA LIST
========================================================= */

.property-criteria-list {

    display: flex;

    flex-direction: column;

    gap: 24px;
}


/* =========================================================
   CRITERIA CARD
========================================================= */

.property-criteria-card {

    width: 100%;

    min-height: 74px;

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 14px 16px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #4d7ff0;

    border-radius: 14px;

    box-shadow:
        0 6px 18px rgba(40,117,223,0.10);

}


/* =========================================================
   CHECK ICON
========================================================= */

.property-card-icon {

    width: 42px;

    height: 42px;

    min-width: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e5efff;

    border-radius: 5px;

    color: #2875df;
}

.property-card-icon i {

    font-size: 21px;

    color: #2875df;
}


/* =========================================================
   CARD TEXT
========================================================= */

.property-card-text {

    color: #3d3d3d;

    font-size: 16px;

    line-height: 1.25;

    font-weight: 400;
}


/* =========================================================
   DOCUMENT LIST
========================================================= */

.property-document-list {

    display: flex;

    flex-direction: column;

    gap: 24px;
}


/* =========================================================
   DOCUMENT CARD
========================================================= */

.property-document-card {

    width: 100%;

    min-height: 74px;

    display: flex;

    align-items: center;

    gap: 24px;

    padding: 14px 24px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #4d7ff0;

    border-radius: 14px;

    box-shadow:
        0 6px 18px rgba(40,117,223,0.10);

    color: #3d3d3d;

    font-size: 16px;

    line-height: 1.25;

    font-weight: 400;
}


/* =========================================================
   DOCUMENT ICON
========================================================= */

.property-document-icon {

    width: 42px;

    height: 42px;

    min-width: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e5efff;

    border-radius: 5px;
}

.property-document-icon i {

    color: #2875df;

    font-size: 19px;
}


/* =========================================================
   CARD HOVER
========================================================= */

.property-criteria-card,
.property-document-card {

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.property-criteria-card:hover,
.property-document-card:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 24px rgba(40,117,223,0.15);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .property-eligibility-section {

        padding: 25px 20px 55px;
    }


    .property-eligibility-tabs {

        grid-template-columns: repeat(3, 1fr);

        row-gap: 4px;

        margin-bottom: 35px;
    }


    .property-eligibility-grid {

        grid-template-columns: 1fr;

        gap: 35px;
    }


    .property-eligibility-tab {

        font-size: 14px;

        min-height: 58px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .property-eligibility-section {

        padding: 22px 12px 45px !important;
    }


    .property-eligibility-container {

        width: 100% !important;
    }


    /* =====================================================
       TABS
    ===================================================== */

    .property-eligibility-tabs {

        display: flex !important;

        width: 100% !important;

        overflow-x: auto !important;

        overflow-y: hidden !important;

        gap: 5px !important;

        padding: 4px !important;

        margin-bottom: 30px !important;

        border-radius: 9px !important;

        scrollbar-width: none;
    }

    .property-eligibility-tabs::-webkit-scrollbar {
        display: none;
    }


    .property-eligibility-tab {

        flex: 0 0 145px !important;

        width: 145px !important;

        min-width: 145px !important;

        min-height: 58px !important;

        padding: 7px 8px !important;

        font-size: 13px !important;

        line-height: 1.15 !important;

        border-radius: 7px !important;

        white-space: normal !important;
    }


    /* =====================================================
       CONTENT
    ===================================================== */

    .property-eligibility-grid {

        display: flex !important;

        flex-direction: column !important;

        gap: 30px !important;

        width: 100% !important;
    }


    .property-eligibility-column {

        width: 100% !important;
    }


    /* =====================================================
       TITLES
    ===================================================== */

    .property-column-title {

        margin-bottom: 15px !important;

        font-size: 18px !important;

        line-height: 1.3 !important;
    }


    /* =====================================================
       CARDS
    ===================================================== */

    .property-criteria-list,
    .property-document-list {

        gap: 14px !important;
    }


    .property-criteria-card,
    .property-document-card {

        width: 100% !important;

        min-height: 64px !important;

        padding: 12px !important;

        gap: 12px !important;

        border-radius: 11px !important;
    }


    /* =====================================================
       ICON
    ===================================================== */

    .property-card-icon,
    .property-document-icon {

        width: 40px !important;

        height: 40px !important;

        min-width: 40px !important;
    }


    .property-card-icon i {

        font-size: 19px !important;
    }


    .property-document-icon i {

        font-size: 17px !important;
    }


    /* =====================================================
       TEXT
    ===================================================== */

    .property-card-text,
    .property-document-card {

        font-size: 14px !important;

        line-height: 1.35 !important;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .property-eligibility-section {

        padding-left: 10px !important;

        padding-right: 10px !important;
    }


    .property-eligibility-tab {

        flex-basis: 135px !important;

        width: 135px !important;

        min-width: 135px !important;

        font-size: 12px !important;
    }


    .property-column-title {

        font-size: 17px !important;
    }


    .property-criteria-card,
    .property-document-card {

        padding: 11px !important;

        gap: 11px !important;
    }


    .property-card-icon,
    .property-document-icon {

        width: 38px !important;

        height: 38px !important;

        min-width: 38px !important;
    }


    .property-card-text,
    .property-document-card {

        font-size: 13px !important;

        line-height: 1.35 !important;
    }

}




/* =========================================================
   PROPERTY OVERVIEW SECTION
========================================================= */

.property-overview-section {
    width: 100%;
    background: #f8fafc;
    padding: 35px 20px 55px;
    overflow: hidden;
}


/* MAIN CONTAINER */

.property-overview-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.property-overview-heading {
    text-align: center;
    margin-bottom: 45px;
}

.property-overview-label {
    color: #2875df;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 8px;
}

.property-overview-heading h2 {
    margin: 0 0 8px;
    color: #333333;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 600;
}

.property-overview-heading p {
    margin: 0;
    color: #727272;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 400;
}


/* =========================================================
   MAIN 3 COLUMN AREA
========================================================= */

.property-overview-content {
    display: grid;
    grid-template-columns: 1fr 340px 1fr;
    align-items: center;
    column-gap: 25px;
}


/* =========================================================
   FEATURES
========================================================= */

.property-features {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 350px;
}

.property-features-left {
    align-items: flex-start;
}

.property-features-right {
    align-items: flex-start;
}


/* FEATURE */

.property-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 65px;
}


/* =========================================================
   ICON BOX
========================================================= */

.property-feature-icon {
    width: 41px;
    height: 41px;
    min-width: 41px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #e5efff;
    border-radius: 6px;

    color: #2875df;

    font-size: 19px;
}


/* ICON */

.property-feature-icon i {
    color: #2875df;
}


/* =========================================================
   FEATURE TEXT
========================================================= */

.property-feature-text {
    color: #252525;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 500;
}


/* =========================================================
   CENTER IMAGE
========================================================= */

.property-overview-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/* IMAGE WRAPPER */

.property-image-wrapper {
    width: 330px;
    height: 250px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* IMAGE */

.property-main-image {
    width: 100%;
    max-width: 330px;
    height: auto;
    object-fit: contain;
    display: block;
}


/* =========================================================
   APPLY BUTTON
========================================================= */

.property-apply-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 168px;
    height: 50px;

    background: #2875df;
    color: #ffffff;

    border-radius: 8px;

    text-decoration: none;

    font-size: 15px;
    font-weight: 600;

    margin-top: 5px;

    transition: all 0.3s ease;
}

.property-apply-btn:hover {
    background: #1f64c5;
    color: #ffffff;
    transform: translateY(-2px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .property-overview-section {
        padding: 35px 20px 50px;
    }

    .property-overview-content {
        grid-template-columns: 1fr 280px 1fr;
        column-gap: 12px;
    }

    .property-image-wrapper {
        width: 280px;
        height: 220px;
    }

    .property-main-image {
        max-width: 280px;
    }

    .property-feature-text {
        font-size: 13px;
    }

    .property-feature-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 17px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .property-overview-section {
        padding: 35px 15px 45px;
    }

    .property-overview-heading {
        margin-bottom: 25px;
    }

    .property-overview-label {
        font-size: 14px;
    }

    .property-overview-heading h2 {
        font-size: 22px;
    }

    .property-overview-heading p {
        font-size: 14px;
        line-height: 1.5;
    }

    .desktop-break {
        display: none;
    }


    /* STACK EVERYTHING */

    .property-overview-content {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }


    /* CENTER IMAGE FIRST */

    .property-overview-center {
        order: 1;
        width: 100%;
    }


    .property-features-left {
        order: 2;
    }

    .property-features-right {
        order: 3;
    }


    /* FEATURES */

    .property-features {
        width: 100%;
        height: auto;
        gap: 15px;
    }


    .property-feature {
        width: 100%;
        min-height: auto;
        gap: 12px;
    }


    .property-feature-text {
        font-size: 14px;
    }


    /* IMAGE */

    .property-image-wrapper {
        width: 100%;
        max-width: 320px;
        height: 220px;
    }

    .property-main-image {
        width: 100%;
        max-width: 320px;
    }


    /* BUTTON */

    .property-apply-btn {
        margin-bottom: 15px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .property-overview-heading h2 {
        font-size: 20px;
    }

    .property-overview-heading p {
        font-size: 13px;
    }

    .property-image-wrapper {
        max-width: 290px;
        height: 200px;
    }

    .property-main-image {
        max-width: 290px;
    }

}



/* =========================================================
   MAIN SECTION
========================================================= */

.home-loan-emi-section {

    width: 100%;

    background: #edf4fd;

    padding: 45px 25px 60px;

    box-sizing: border-box;

    overflow: hidden;
}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.home-loan-emi-wrapper {

    width: 100%;

    max-width: 1120px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 70px;

    box-sizing: border-box;
}


/* =========================================================
   LEFT SIDE
========================================================= */

.home-loan-emi-left {

    flex: 1;

    min-width: 0;
}


.home-loan-emi-left h2 {

    margin: 0 0 12px;

    color: #333333;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 34px;

    font-weight: 600;

    line-height: 1.15;

    letter-spacing: -0.5px;
}


.home-loan-emi-left p {

    margin: 0 0 22px;

    color: #707070;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    line-height: 1.4;
}


/* =========================================================
   BUTTON
========================================================= */

.home-loan-emi-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    min-width: 215px;

    height: 48px;

    padding: 0 22px;

    background: #2878e5;

    color: #ffffff !important;

    border-radius: 7px;

    text-decoration: none !important;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    font-weight: 600;

    box-sizing: border-box;

    transition:
        all .25s ease;
}


.home-loan-emi-btn:hover {

    background: #1d66cc;

    color: #ffffff !important;

    transform: translateY(-1px);

    box-shadow:
        0 5px 14px rgba(40,120,229,.20);
}


.home-loan-emi-btn span {

    font-size: 23px;

    line-height: 1;
}


/* =========================================================
   RIGHT EMI CARD - LARGE
========================================================= */

.home-loan-emi-box {

    flex: 0 0 560px;

    width: 560px;

    min-height: 275px;

    padding: 36px 34px 30px;

    box-sizing: border-box;

    border-radius: 17px;

    background:
        linear-gradient(
            115deg,
            #2878e5 0%,
            #493ddd 48%,
            #b500d9 100%
        );

    color: #ffffff;

    box-shadow:
        0 7px 20px rgba(41,92,171,.13);
}


/* =========================================================
   CARD TITLE
========================================================= */

.emi-box-title {

    margin-bottom: 32px;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;

    font-weight: 400;
}


/* =========================================================
   MAIN EMI
========================================================= */

.emi-amount {

    margin-bottom: 12px;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 38px;

    font-weight: 700;

    line-height: 1;
}


.emi-amount span {

    margin-left: 3px;

    font-size: 18px;

    font-weight: 400;
}


/* =========================================================
   LOAN DETAILS
========================================================= */

.emi-info {

    margin-bottom: 34px;

    color: rgba(255,255,255,.92);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    line-height: 1.4;
}


/* =========================================================
   BOTTOM VALUES
========================================================= */

.emi-bottom {

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 25px;
}


.emi-value {

    display: flex;

    flex-direction: column;

    min-width: 0;
}


.emi-value strong {

    margin-bottom: 6px;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 24px;

    font-weight: 700;

    line-height: 1;
}


.emi-value small {

    color: rgba(255,255,255,.90);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    line-height: 1.2;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .home-loan-emi-wrapper {

        max-width: 1120px;

        gap: 75px;
    }


    .home-loan-emi-box {

        flex-basis: 580px;

        width: 580px;

        min-height: 285px;

        padding:
            38px
            36px
            32px;
    }


    .home-loan-emi-left h2 {

        font-size: 35px;
    }

}


/* =========================================================
   DESKTOP 992 - 1199
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .home-loan-emi-wrapper {

        max-width: 1000px;

        gap: 45px;
    }


    .home-loan-emi-box {

        flex-basis: 520px;

        width: 520px;

        min-height: 265px;

        padding:
            32px
            30px
            28px;
    }


    .home-loan-emi-left h2 {

        font-size: 31px;
    }


    .emi-amount {

        font-size: 35px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .home-loan-emi-section {

        padding:
            40px
            25px
            55px;
    }


    .home-loan-emi-wrapper {

        gap: 30px;

        max-width: 900px;
    }


    .home-loan-emi-left h2 {

        font-size: 28px;
    }


    .home-loan-emi-left p {

        font-size: 13px;
    }


    .home-loan-emi-box {

        flex-basis: 450px;

        width: 450px;

        min-height: 250px;

        padding:
            29px
            25px
            26px;
    }


    .emi-box-title {

        font-size: 13px;

        margin-bottom: 27px;
    }


    .emi-amount {

        font-size: 30px;
    }


    .emi-amount span {

        font-size: 15px;
    }


    .emi-info {

        font-size: 10px;

        margin-bottom: 28px;
    }


    .emi-bottom {

        gap: 12px;
    }


    .emi-value strong {

        font-size: 19px;
    }


    .emi-value small {

        font-size: 10px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .home-loan-emi-section {

        padding:
            38px
            15px
            48px;
    }


    .home-loan-emi-wrapper {

        flex-direction: column;

        align-items: stretch;

        gap: 30px;
    }


    .home-loan-emi-left {

        width: 100%;

        text-align: center;
    }


    .home-loan-emi-left h2 {

        font-size: 27px;

        line-height: 1.2;

        letter-spacing: 0;
    }


    .home-loan-emi-left p {

        font-size: 13px;

        line-height: 1.45;
    }


    .home-loan-emi-btn {

        min-width: 205px;

        height: 46px;

        font-size: 13px;
    }


    /* LARGE CARD ON MOBILE */

    .home-loan-emi-box {

        width: 100%;

        min-width: 0;

        flex: none;

        min-height: 260px;

        padding:
            29px
            23px
            27px;

        border-radius: 15px;
    }


    .emi-box-title {

        font-size: 13px;

        margin-bottom: 27px;
    }


    .emi-amount {

        font-size: 30px;
    }


    .emi-amount span {

        font-size: 15px;
    }


    .emi-info {

        font-size: 10px;

        margin-bottom: 29px;
    }


    .emi-bottom {

        gap: 10px;
    }


    .emi-value strong {

        font-size: 18px;
    }


    .emi-value small {

        font-size: 10px;
    }

}


/* =========================================================
   IPHONE 376 - 575
========================================================= */

@media (min-width: 376px) and (max-width: 575px) {

    .home-loan-emi-section {

        padding:
            35px
            14px
            45px;
    }


    .home-loan-emi-wrapper {

        gap: 28px;
    }


    .home-loan-emi-left h2 {

        font-size: 25px;
    }


    .home-loan-emi-left p {

        font-size: 12px;
    }


    .home-loan-emi-box {

        min-height: 255px;

        padding:
            27px
            19px
            25px;
    }


    .emi-box-title {

        font-size: 12px;

        margin-bottom: 24px;
    }


    .emi-amount {

        font-size: 27px;
    }


    .emi-amount span {

        font-size: 14px;
    }


    .emi-info {

        font-size: 9px;

        margin-bottom: 26px;

        white-space: nowrap;
    }


    .emi-bottom {

        gap: 7px;
    }


    .emi-value strong {

        font-size: 17px;
    }


    .emi-value small {

        font-size: 9px;
    }

}


/* =========================================================
   IPHONE SE / SMALL MOBILE
========================================================= */

@media (max-width: 375px) {

    .home-loan-emi-section {

        padding:
            32px
            11px
            42px;
    }


    .home-loan-emi-wrapper {

        gap: 25px;
    }


    .home-loan-emi-left h2 {

        font-size: 23px;
    }


    .home-loan-emi-left p {

        font-size: 11px;

        line-height: 1.45;
    }


    .home-loan-emi-btn {

        min-width: 195px;

        height: 44px;

        font-size: 12px;
    }


    .home-loan-emi-box {

        min-height: 245px;

        padding:
            24px
            15px
            22px;

        border-radius: 13px;
    }


    .emi-box-title {

        font-size: 10px;

        margin-bottom: 21px;
    }


    .emi-amount {

        font-size: 23px;
    }


    .emi-amount span {

        font-size: 12px;
    }


    .emi-info {

        font-size: 8px;

        margin-bottom: 23px;

        white-space: nowrap;
    }


    .emi-bottom {

        gap: 4px;
    }


    .emi-value strong {

        font-size: 14px;
    }


    .emi-value small {

        font-size: 8px;
    }

}

/* project loan css */



/* =========================================================
   DARK OVERLAY
========================================================= */

.home-loan-overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.45) 30%,
        rgba(0, 0, 0, 0.08) 65%,
        rgba(0, 0, 0, 0) 100%
    );

    z-index: 1;
}


/* =========================================================
   CONTAINER
========================================================= */

.home-loan-container {
    position: relative;
    z-index: 2;

    min-height: 525px;

    display: flex;
    align-items: center;
}


/* =========================================================
   CONTENT
========================================================= */

.home-loan-content {
    width: 50%;

    padding-left: 0;
    padding-top: 5px;
    padding-bottom: 5px;
}


/* =========================================================
   HEADING
========================================================= */

.home-loan-content h1 {
    margin: 0 0 8px 0;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 44px;
    line-height: 1.15;

    font-weight: 700;

    letter-spacing: 0;
}


.home-loan-content h1 span {
    color: #2f80ed;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.home-loan-content p {
    margin: 0 0 15px 0;

    color: rgba(255, 255, 255, 0.90);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;
    line-height: 1.5;

    font-weight: 400;
}


/* =========================================================
   APPLY NOW BUTTON
========================================================= */

.home-loan-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 86px;
    height: 35px;

    padding: 0 17px;

    background: #2878e5;

    color: #ffffff !important;

    border-radius: 4px;

    text-decoration: none !important;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;
    font-weight: 600;

    transition: all 0.3s ease;
}


.home-loan-btn:hover {
    background: #1265d2;

    color: #ffffff !important;

    transform: translateY(-1px);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.20);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .home-loan-hero {
        min-height: 525px;

        background-size: cover;

        background-position: center center;
    }


    .home-loan-container {
        min-height: 525px;
    }


    .home-loan-content {
        width: 50%;
    }


    .home-loan-content h1 {
        font-size: 44px;
    }


    .home-loan-content p {
        font-size: 15px;
    }
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .home-loan-hero {
        min-height: 450px;

        background-size: cover;

        background-position: center center;
    }


    .home-loan-container {
        min-height: 450px;
    }


    .home-loan-content {
        width: 50%;
    }


    .home-loan-content h1 {
        font-size: 36px;
    }


    .home-loan-content p {
        font-size: 14px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .home-loan-hero {

        min-height: 360px;

        /*
         * Keep the complete image visible better
         */
        background-size: 100% 100%;

        background-position: center center;

        background-repeat: no-repeat;
    }


    .home-loan-container {

        min-height: 360px;

        display: flex;

        align-items: center;

        padding-left: 30px;
        padding-right: 30px;

        box-sizing: border-box;
    }


    .home-loan-content {

        width: 52%;

        padding: 0;
    }


    .home-loan-content h1 {

        font-size: 29px;

        line-height: 1.18;

        margin-bottom: 9px;
    }


    .home-loan-content p {

        font-size: 12px;

        line-height: 1.45;

        margin-bottom: 15px;
    }


    .home-loan-btn {

        height: 35px;

        min-width: 86px;

        padding: 0 15px;

        font-size: 12px;
    }


    .home-loan-overlay {

        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.68) 0%,
            rgba(0, 0, 0, 0.43) 40%,
            rgba(0, 0, 0, 0.10) 75%,
            rgba(0, 0, 0, 0) 100%
        );
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .home-loan-hero {

        min-height: 300px;

        /*
         * IMPORTANT:
         * Cover was cropping the family image.
         * 100% 100% keeps the whole banner visible.
         */
        background-size: 100% 100%;

        background-position: center center;

        background-repeat: no-repeat;
    }


    .home-loan-container {

        min-height: 300px;

        width: 100%;

        display: flex;

        align-items: center;

        padding-top: 30px;
        padding-bottom: 30px;
        padding-left: 22px;
        padding-right: 22px;

        box-sizing: border-box;
    }


    .home-loan-content {

        width: 58%;

        padding: 0;
    }


    .home-loan-content h1 {

        font-size: 22px;

        line-height: 1.18;

        margin: 0 0 9px 0;
    }


    .home-loan-content p {

        font-size: 11px;

        line-height: 1.5;

        margin: 0 0 15px 0;
    }


    .home-loan-btn {

        height: 34px;

        min-width: 82px;

        padding: 0 15px;

        font-size: 11px;

        border-radius: 4px;
    }


    .home-loan-overlay {

        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.50) 42%,
            rgba(0, 0, 0, 0.12) 78%,
            rgba(0, 0, 0, 0.02) 100%
        );
    }
}


/* =========================================================
   IPHONE / SMALL MOBILE
========================================================= */

@media (max-width: 575px) {

    .home-loan-hero {

        min-height: 270px;

        /*
         * Full banner image visible
         */
        background-size: 100% 100%;

        background-position: center center;

        background-repeat: no-repeat;
    }


    .home-loan-container {

        min-height: 270px;

        padding-top: 25px;
        padding-bottom: 25px;
        padding-left: 18px;
        padding-right: 18px;

        align-items: center;
    }


    .home-loan-content {

        width: 58%;

        max-width: 230px;

        padding: 0;
    }


    .home-loan-content h1 {

        font-size: 20px;

        line-height: 1.18;

        margin-bottom: 8px;
    }


    .home-loan-content p {

        font-size: 10px;

        line-height: 1.45;

        margin-bottom: 13px;
    }


    .home-loan-btn {

        height: 33px;

        min-width: 82px;

        padding: 0 14px;

        font-size: 10px;
    }


    .home-loan-overlay {

        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.70) 0%,
            rgba(0, 0, 0, 0.48) 43%,
            rgba(0, 0, 0, 0.15) 75%,
            rgba(0, 0, 0, 0.02) 100%
        );
    }
}


/* =========================================================
   IPHONE SE / 375px
========================================================= */

@media (max-width: 375px) {

    .home-loan-hero {

        min-height: 245px;

        background-size: 100% 100%;

        background-position: center center;
    }


    .home-loan-container {

        min-height: 245px;

        padding-top: 22px;
        padding-bottom: 22px;
        padding-left: 15px;
        padding-right: 15px;
    }


    .home-loan-content {

        width: 58%;

        max-width: 210px;
    }


    .home-loan-content h1 {

        font-size: 18px;

        line-height: 1.17;

        margin-bottom: 7px;
    }


    .home-loan-content p {

        font-size: 9px;

        line-height: 1.4;

        margin-bottom: 12px;
    }


    .home-loan-btn {

        height: 31px;

        min-width: 78px;

        padding: 0 12px;

        font-size: 9px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .home-loan-hero {

        min-height: 230px;

        background-size: 100% 100%;

        background-position: center center;
    }


    .home-loan-container {

        min-height: 230px;

        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 13px;
        padding-right: 13px;
    }


    .home-loan-content {

        width: 58%;

        max-width: 195px;
    }


    .home-loan-content h1 {

        font-size: 17px;

        line-height: 1.17;
    }


    .home-loan-content p {

        font-size: 8.5px;

        line-height: 1.4;
    }


    .home-loan-btn {

        height: 30px;

        min-width: 75px;

        padding: 0 11px;

        font-size: 9px;
    }
}


/* =========================================================
   EXTRA SMALL DEVICES
========================================================= */

@media (max-width: 320px) {

    .home-loan-hero {

        min-height: 215px;

        background-size: 100% 100%;
    }


    .home-loan-container {

        min-height: 215px;

        padding-left: 12px;
        padding-right: 12px;
    }


    .home-loan-content {

        width: 57%;
    }


    .home-loan-content h1 {

        font-size: 16px;
    }


    .home-loan-content p {

        font-size: 8px;
    }


    .home-loan-btn {

        height: 29px;

        min-width: 72px;

        font-size: 8px;
    }
}


/* =========================================================
   MAIN SECTION
========================================================= */

.property-loan-why {
    width: 100%;
    background: #f8fafc;
    padding: 25px 20px 60px;
    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.property-loan-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.property-loan-heading {
    text-align: center;
    margin-bottom: 48px;
}

.property-loan-heading h2 {
    margin: 0 0 4px;

    font-size: 26px;
    line-height: 1.3;

    font-weight: 600;
    color: #333333;
}


/* FIRST PARAGRAPH */

.property-loan-intro {
    margin: 0 auto 14px;

    font-size: 15px;
    line-height: 1.25;

    font-weight: 400;
}


/* BLUE TEXT */

.blue-text {
    color: #2875df;
}


/* SECOND PARAGRAPH */

.property-loan-description {
    margin: 0 auto;

    color: #777777;

    font-size: 15px;
    line-height: 1.35;

    font-weight: 400;
}


/* =========================================================
   CARDS GRID
========================================================= */

.property-loan-cards {
    display: grid;

    grid-template-columns: repeat(6, 1fr);

    column-gap: 32px;
    row-gap: 34px;

    align-items: start;
}


/* =========================================================
   CARD
========================================================= */

.property-loan-card {

    grid-column: span 2;

    min-height: 218px;

    padding: 32px 24px 25px;

    background: #ffffff;

    border: 1px solid #4d7ff0;

    border-radius: 16px;

    box-shadow: 0 8px 22px rgba(38, 102, 220, 0.12);

    box-sizing: border-box;

    transition: all 0.3s ease;
}


/* =========================================================
   BOTTOM CARDS
========================================================= */

/*
   4th card starts around 18%
   5th card starts around 50%
   This creates the centered 2-card row
*/

.property-loan-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.property-loan-card:nth-child(5) {
    grid-column: 4 / span 2;
}


/* =========================================================
   ICON BOX
========================================================= */

.property-loan-icon {

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #e6efff;

    border-radius: 5px;

    margin-bottom: 25px;
}


/* ICON */

.property-loan-icon i {

    font-size: 19px;

    color: #2875df;
}


/* =========================================================
   CARD TITLE
========================================================= */

.property-loan-card h3 {

    margin: 0 0 8px;

    color: #3b3b3b;

    font-size: 22px;

    line-height: 1.2;

    font-weight: 600;
}


/* =========================================================
   CARD DESCRIPTION
========================================================= */

.property-loan-card p {

    margin: 0;

    color: #707070;

    font-size: 15px;

    line-height: 1.25;

    font-weight: 400;
}


/* =========================================================
   HOVER
========================================================= */

.property-loan-card:hover {

    transform: translateY(-3px);

    box-shadow: 0 12px 28px rgba(38, 102, 220, 0.17);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .property-loan-cards {

        grid-template-columns: repeat(2, 1fr);

        gap: 25px;

    }

    .property-loan-card,
    .property-loan-card:nth-child(4),
    .property-loan-card:nth-child(5) {

        grid-column: auto;

    }

    .property-loan-card:last-child {

        grid-column: 1 / -1;

        max-width: calc(50% - 12px);

        margin: 0 auto;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .property-loan-why {

        padding: 30px 15px 45px;

    }


    .property-loan-heading {

        margin-bottom: 30px;

    }


    .property-loan-heading h2 {

        font-size: 23px;

    }


    .property-loan-intro {

        font-size: 14px;

        line-height: 1.45;

    }


    .property-loan-description {

        font-size: 14px;

        line-height: 1.45;

    }


    .desktop-only {

        display: none;

    }


    .property-loan-cards {

        display: flex;

        flex-direction: column;

        gap: 20px;

    }


    .property-loan-card,
    .property-loan-card:nth-child(4),
    .property-loan-card:nth-child(5) {

        width: 100%;

        max-width: 100%;

        min-height: auto;

        margin: 0;

        padding: 25px 20px;

    }


    .property-loan-card h3 {

        font-size: 20px;

    }


    .property-loan-card p {

        font-size: 14px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .property-loan-heading h2 {

        font-size: 21px;

    }


    .property-loan-card {

        border-radius: 14px;

    }


    .property-loan-card h3 {

        font-size: 19px;

    }

}

    /* =========================================================
   PROPERTY OVERVIEW - RESPONSIVE CSS
========================================================= */

.property-overview-section {
    width: 100%;
    padding: 35px 20px 55px;
    background: #f8fafc;
    overflow: hidden;
    box-sizing: border-box;
}

.property-overview-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.property-overview-heading {
    text-align: center;
    margin-bottom: 45px;
}

.property-overview-heading h4 {
    margin-bottom: 8px;
}

.property-overview-heading h2 {
    margin-bottom: 10px;
}

.property-overview-heading p {
    margin: 0 auto;
    max-width: 1100px;
    color: #777;
    font-size: 15px;
    line-height: 1.45;
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.property-overview-content {
    display: grid;
    grid-template-columns: 1fr 340px 1fr;
    align-items: center;
    gap: 25px;
}


/* =========================================================
   FEATURES
========================================================= */

.property-features {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 350px;
}

.property-feature {
    display: flex;
    align-items: center;
    gap: 12px;
}

.property-feature-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #e5efff;
    border-radius: 6px;

    color: #2875df;
}

.property-feature-icon i {
    font-size: 18px;
    color: #2875df;
}

.property-feature-text {
    color: #252525;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 500;
}


/* =========================================================
   CENTER IMAGE
========================================================= */

.property-overview-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.property-image-wrapper {
    width: 340px;
    height: 250px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.property-main-image {
    display: block;
    width: 100%;
    max-width: 340px;
    height: auto;
    object-fit: contain;
}


/* =========================================================
   APPLY BUTTON
========================================================= */

.property-apply-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 168px;
    height: 50px;

    margin-top: 5px;

    background: #2875df;
    color: #fff;

    border-radius: 8px;

    text-decoration: none;

    font-size: 15px;
    font-weight: 600;

    transition: 0.3s ease;
}

.property-apply-btn:hover {
    background: #1f64c5;
    color: #fff;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .property-overview-section {
        padding: 35px 20px 50px;
    }

    .property-overview-content {
        grid-template-columns: 1fr 280px 1fr;
        gap: 15px;
    }

    .property-features {
        height: 320px;
    }

    .property-image-wrapper {
        width: 280px;
        height: 220px;
    }

    .property-main-image {
        max-width: 280px;
    }

    .property-feature-text {
        font-size: 13px;
    }

    .property-feature-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .property-overview-heading p {
        font-size: 14px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .property-overview-section {
        padding: 30px 15px 45px;
    }

    .property-overview-container {
        width: 100%;
    }


    /* HEADING */

    .property-overview-heading {
        margin-bottom: 25px;
    }

    .property-overview-heading h4 {
        font-size: 14px;
        margin-bottom: 7px;
    }

    .property-overview-heading h2 {
        font-size: 23px;
        line-height: 1.3;
        margin-bottom: 12px;
    }

    .property-overview-heading p {
        width: 100%;
        font-size: 14px;
        line-height: 1.5;
    }


    /* REMOVE DESKTOP BR */

    .desktop-break {
        display: none;
    }


    /* =====================================================
       MOBILE CONTENT
    ===================================================== */

    .property-overview-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 20px;
    }


    /* CENTER IMAGE FIRST */

    .property-overview-center {
        order: 1;
        width: 100%;
    }


    /* LEFT FEATURES */

    .property-features-left {
        order: 2;
    }


    /* RIGHT FEATURES */

    .property-features-right {
        order: 3;
    }


    /* =====================================================
       IMAGE
    ===================================================== */

    .property-image-wrapper {
        width: 100%;
        max-width: 320px;
        height: 220px;
        margin: 0 auto;
    }

    .property-main-image {
        width: 100%;
        max-width: 320px;
        height: auto;
    }


    /* =====================================================
       BUTTON
    ===================================================== */

    .property-apply-btn {
        width: 165px;
        height: 48px;
        margin: 0 auto;
    }


    /* =====================================================
       FEATURES
    ===================================================== */

    .property-features {
        width: 100%;
        height: auto;

        display: flex;
        flex-direction: column;

        gap: 18px;
    }

    .property-feature {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .property-feature-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
    }

    .property-feature-text {
        font-size: 14px;
        line-height: 1.35;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .property-overview-section {
        padding: 25px 12px 40px;
    }

    .property-overview-heading h4 {
        font-size: 13px;
    }

    .property-overview-heading h2 {
        font-size: 20px;
    }

    .property-overview-heading p {
        font-size: 13px;
        line-height: 1.5;
    }


    .property-image-wrapper {
        max-width: 285px;
        height: 195px;
    }

    .property-main-image {
        max-width: 285px;
    }


    .property-feature {
        align-items: flex-start;
    }

    .property-feature-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .property-feature-icon i {
        font-size: 17px;
    }

    .property-feature-text {
        font-size: 13px;
        line-height: 1.4;
        padding-top: 2px;
    }


    .property-apply-btn {
        width: 155px;
        height: 46px;
        font-size: 14px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .property-overview-heading h2 {
        font-size: 19px;
    }

    .property-overview-heading p {
        font-size: 12.5px;
    }

    .property-image-wrapper {
        max-width: 260px;
        height: 180px;
    }

    .property-main-image {
        max-width: 260px;
    }

    .property-feature-text {
        font-size: 12.5px;
    }
}

/* =========================================================
   PROPERTY OVERVIEW - MOBILE FIX
========================================================= */

@media (max-width: 767px) {

    .property-overview-section {
        width: 100% !important;
        padding: 25px 15px 40px !important;
        margin: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .property-overview-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }


    /* =====================================================
       HEADING
    ===================================================== */

    .property-overview-heading {
        width: 100% !important;
        text-align: center !important;
        margin: 0 0 25px !important;
        padding: 0 !important;
    }

    .property-overview-heading h4 {
        margin: 0 0 7px !important;
        font-size: 14px !important;
        line-height: 1.3 !important;
    }

    .property-overview-heading h2 {
        margin: 0 0 12px !important;
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    .property-overview-heading p {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }

    .desktop-break {
        display: none !important;
    }


    /* =====================================================
       MAIN CONTENT
    ===================================================== */

    .property-overview-content {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }


    /* =====================================================
       CENTER IMAGE SECTION
    ===================================================== */

    .property-overview-center {
        order: 1 !important;

        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* IMAGE BOX */

    .property-image-wrapper {
        width: 100% !important;
        max-width: 300px !important;

        height: 210px !important;
        min-height: 210px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        overflow: hidden !important;
        box-sizing: border-box !important;
    }


    /* ACTUAL IMAGE */

    .property-main-image {
        display: block !important;

        width: auto !important;
        max-width: 100% !important;

        height: 205px !important;
        max-height: 205px !important;

        object-fit: contain !important;

        margin: 0 auto !important;
        padding: 0 !important;
    }


    /* =====================================================
       APPLY BUTTON
    ===================================================== */

    .property-apply-btn {
        order: 2 !important;

        width: 210px !important;
        max-width: 210px !important;

        height: 48px !important;
        min-height: 48px !important;

        margin: 5px auto 28px !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: #2875df !important;
        color: #ffffff !important;

        border-radius: 8px !important;

        font-size: 16px !important;
        line-height: 1 !important;
        font-weight: 600 !important;

        text-decoration: none !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       LEFT + RIGHT FEATURES
    ===================================================== */

    .property-features {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 16px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .property-features-left {
        order: 3 !important;
    }

    .property-features-right {
        order: 4 !important;

        margin-top: 16px !important;
    }


    /* =====================================================
       EACH FEATURE
    ===================================================== */

    .property-feature {
        width: 100% !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;

        gap: 14px !important;

        margin: 0 !important;
        padding: 0 !important;

        min-height: 50px !important;
    }


    /* =====================================================
       ICON
    ===================================================== */

    .property-feature-icon {
        width: 46px !important;
        min-width: 46px !important;

        height: 46px !important;
        min-height: 46px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: #e5efff !important;

        border-radius: 7px !important;

        margin: 0 !important;
        padding: 0 !important;

        flex-shrink: 0 !important;
    }


    .property-feature-icon i {
        font-size: 19px !important;
        line-height: 1 !important;
        color: #2875df !important;
    }


    /* =====================================================
       FEATURE TEXT
    ===================================================== */

    .property-feature-text {
        width: auto !important;
        max-width: calc(100% - 60px) !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #252525 !important;

        font-size: 14px !important;
        line-height: 1.4 !important;

        font-weight: 500 !important;

        text-align: left !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
    }


    /* REMOVE FORCED DESKTOP LINE BREAKS */

    .property-feature-text br {
        display: none !important;
    }

}


/* =========================================================
   SMALL MOBILE - 480px
========================================================= */

@media (max-width: 480px) {

    .property-overview-section {
        padding: 22px 15px 35px !important;
    }


    .property-overview-heading {
        margin-bottom: 20px !important;
    }


    .property-overview-heading h4 {
        font-size: 13px !important;
    }


    .property-overview-heading h2 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }


    .property-overview-heading p {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
    }


    /* SMALLER IMAGE */

    .property-image-wrapper {
        width: 100% !important;
        max-width: 280px !important;

        height: 190px !important;
        min-height: 190px !important;
    }


    .property-main-image {
        height: 185px !important;
        max-height: 185px !important;
        max-width: 280px !important;
    }


    /* BUTTON */

    .property-apply-btn {
        width: 200px !important;
        max-width: 200px !important;

        height: 47px !important;
        min-height: 47px !important;

        margin-top: 5px !important;
        margin-bottom: 25px !important;

        font-size: 15px !important;
    }


    /* FEATURES */

    .property-features {
        gap: 14px !important;
    }


    .property-feature {
        gap: 12px !important;
        min-height: 48px !important;
    }


    .property-feature-icon {
        width: 43px !important;
        min-width: 43px !important;

        height: 43px !important;
        min-height: 43px !important;
    }


    .property-feature-icon i {
        font-size: 18px !important;
    }


    .property-feature-text {
        font-size: 13.5px !important;
        line-height: 1.4 !important;

        max-width: calc(100% - 55px) !important;
    }

}


/* =========================================================
   VERY SMALL MOBILE - 360px
========================================================= */

@media (max-width: 360px) {

    .property-overview-heading h2 {
        font-size: 19px !important;
    }


    .property-overview-heading p {
        font-size: 12px !important;
    }


    .property-image-wrapper {
        max-width: 255px !important;
        height: 175px !important;
        min-height: 175px !important;
    }


    .property-main-image {
        max-width: 255px !important;
        height: 170px !important;
        max-height: 170px !important;
    }


    .property-apply-btn {
        width: 185px !important;
        max-width: 185px !important;
    }


    .property-feature-icon {
        width: 40px !important;
        min-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;
    }


    .property-feature-text {
        font-size: 13px !important;
        max-width: calc(100% - 52px) !important;
    }

}




/* =========================================================
   MAIN SECTION
========================================================= */

.property-benefits-section {

    width: 100%;

    background: #f8fafc;

    padding: 25px 15px 70px;

    overflow: hidden;

    box-sizing: border-box;
}


/* =========================================================
   CONTAINER
========================================================= */

.property-benefits-container {

    width: 100%;

    max-width: 1250px;

    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.property-benefits-heading {

    text-align: center;

    margin-bottom: 48px;
}


.property-benefits-heading h2 {

    margin: 0 0 5px;

    color: #333333;

    font-size: 26px;

    line-height: 1.3;

    font-weight: 600;
}


.property-benefits-heading p {

    margin: 0;

    color: #707070;

    font-size: 15px;

    line-height: 1.4;

    font-weight: 400;
}


/* =========================================================
   GRID
========================================================= */

.property-benefits-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    column-gap: 32px;

    row-gap: 50px;

    width: 100%;
}


/* =========================================================
   CARD
========================================================= */

.property-benefit-card {

    width: 100%;

    min-height: 220px;

    box-sizing: border-box;

    padding: 32px 24px 25px;

    background: #ffffff;

    border: 1px solid #4d7ff0;

    border-radius: 16px;

    box-shadow: 0 7px 20px rgba(40, 117, 223, 0.10);

    transition: all 0.3s ease;
}


/* =========================================================
   ICON BOX
========================================================= */

.property-benefit-icon {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e5efff;

    border-radius: 5px;

    margin-bottom: 26px;
}


.property-benefit-icon i {

    color: #2875df;

    font-size: 19px;

    line-height: 1;
}


/* =========================================================
   CARD TITLE
========================================================= */

.property-benefit-card h3 {

    margin: 0 0 8px;

    color: #3b3b3b;

    font-size: 22px;

    line-height: 1.25;

    font-weight: 600;
}


/* =========================================================
   CARD TEXT
========================================================= */

.property-benefit-card p {

    margin: 0;

    color: #555555;

    font-size: 15px;

    line-height: 1.25;

    font-weight: 400;
}


/* =========================================================
   HOVER
========================================================= */

.property-benefit-card:hover {

    transform: translateY(-3px);

    box-shadow: 0 12px 28px rgba(40, 117, 223, 0.16);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .property-benefits-section {

        padding: 30px 20px 55px;
    }

    .property-benefits-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 25px;
    }

    .property-benefit-card {

        min-height: 220px;
    }

    .property-benefit-card h3 {

        font-size: 20px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .property-benefits-section {

        padding: 28px 15px 45px;
    }


    /* HEADING */

    .property-benefits-heading {

        margin-bottom: 30px;
    }


    .property-benefits-heading h2 {

        font-size: 22px;

        line-height: 1.3;
    }


    .property-benefits-heading p {

        font-size: 14px;
    }


    /* ONE CARD PER ROW */

    .property-benefits-grid {

        display: flex;

        flex-direction: column;

        gap: 20px;
    }


    /* CARD */

    .property-benefit-card {

        width: 100%;

        min-height: auto;

        padding: 25px 20px;

        border-radius: 14px;
    }


    /* ICON */

    .property-benefit-icon {

        width: 42px;

        height: 42px;

        margin-bottom: 22px;
    }


    /* TITLE */

    .property-benefit-card h3 {

        font-size: 20px;

        line-height: 1.3;

        margin-bottom: 8px;
    }


    /* TEXT */

    .property-benefit-card p {

        font-size: 14px;

        line-height: 1.45;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .property-benefits-section {

        padding: 25px 12px 40px;
    }


    .property-benefits-heading h2 {

        font-size: 20px;
    }


    .property-benefits-heading p {

        font-size: 13px;
    }


    .property-benefit-card {

        padding: 23px 18px;

        border-radius: 13px;
    }


    .property-benefit-icon {

        width: 40px;

        height: 40px;

        margin-bottom: 20px;
    }


    .property-benefit-icon i {

        font-size: 18px;
    }


    .property-benefit-card h3 {

        font-size: 19px;
    }


    .property-benefit-card p {

        font-size: 13.5px;

        line-height: 1.45;
    }

}





/* =========================================================
   MAIN SECTION
========================================================= */

.property-eligibility-section {
    width: 100%;
    padding: 30px 15px 70px;
    background: #f8fafc;
    box-sizing: border-box;
    overflow: hidden;
}

.property-eligibility-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
}


/* =========================================================
   TABS
========================================================= */

.property-eligibility-tabs {

    width: 100%;

    display: grid;

    grid-template-columns:
        1fr
        1fr
        1.25fr
        1.25fr
        1.2fr;

    gap: 0;

    padding: 4px;

    background: #eaf2fc;

    border-radius: 10px;

    box-sizing: border-box;

    margin-bottom: 48px;
}


/* TAB */

.property-eligibility-tab {

    border: 0;

    background: transparent;

    color: #333;

    min-height: 64px;

    padding: 8px 12px;

    border-radius: 8px;

    font-size: 15px;

    line-height: 1.15;

    font-weight: 500;

    cursor: pointer;

    transition: all 0.25s ease;

    font-family: inherit;
}


/* ACTIVE TAB */

.property-eligibility-tab.active {

    background: #2875df;

    color: #ffffff;

    box-shadow: 0 3px 8px rgba(40,117,223,0.20);
}


/* HOVER */

.property-eligibility-tab:not(.active):hover {

    background: rgba(40,117,223,0.08);

    color: #2875df;
}


/* =========================================================
   TAB CONTENT
========================================================= */

.property-eligibility-tab-content {

    display: none;

    width: 100%;
}

.property-eligibility-tab-content.active {

    display: block;
}


/* =========================================================
   TWO COLUMNS
========================================================= */

.property-eligibility-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 48px;

    align-items: start;
}


/* =========================================================
   COLUMN TITLE
========================================================= */

.property-column-title {

    margin: 0 0 20px;

    color: #333333;

    font-size: 20px;

    line-height: 1.3;

    font-weight: 500;
}


/* =========================================================
   CRITERIA LIST
========================================================= */

.property-criteria-list {

    display: flex;

    flex-direction: column;

    gap: 24px;
}


/* =========================================================
   CRITERIA CARD
========================================================= */

.property-criteria-card {

    width: 100%;

    min-height: 74px;

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 14px 16px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #4d7ff0;

    border-radius: 14px;

    box-shadow:
        0 6px 18px rgba(40,117,223,0.10);

}


/* =========================================================
   CHECK ICON
========================================================= */

.property-card-icon {

    width: 42px;

    height: 42px;

    min-width: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e5efff;

    border-radius: 5px;

    color: #2875df;
}

.property-card-icon i {

    font-size: 21px;

    color: #2875df;
}


/* =========================================================
   CARD TEXT
========================================================= */

.property-card-text {

    color: #3d3d3d;

    font-size: 16px;

    line-height: 1.25;

    font-weight: 400;
}


/* =========================================================
   DOCUMENT LIST
========================================================= */

.property-document-list {

    display: flex;

    flex-direction: column;

    gap: 24px;
}


/* =========================================================
   DOCUMENT CARD
========================================================= */

.property-document-card {

    width: 100%;

    min-height: 74px;

    display: flex;

    align-items: center;

    gap: 24px;

    padding: 14px 24px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #4d7ff0;

    border-radius: 14px;

    box-shadow:
        0 6px 18px rgba(40,117,223,0.10);

    color: #3d3d3d;

    font-size: 16px;

    line-height: 1.25;

    font-weight: 400;
}


/* =========================================================
   DOCUMENT ICON
========================================================= */

.property-document-icon {

    width: 42px;

    height: 42px;

    min-width: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e5efff;

    border-radius: 5px;
}

.property-document-icon i {

    color: #2875df;

    font-size: 19px;
}


/* =========================================================
   CARD HOVER
========================================================= */

.property-criteria-card,
.property-document-card {

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.property-criteria-card:hover,
.property-document-card:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 24px rgba(40,117,223,0.15);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .property-eligibility-section {

        padding: 25px 20px 55px;
    }


    .property-eligibility-tabs {

        grid-template-columns: repeat(3, 1fr);

        row-gap: 4px;

        margin-bottom: 35px;
    }


    .property-eligibility-grid {

        grid-template-columns: 1fr;

        gap: 35px;
    }


    .property-eligibility-tab {

        font-size: 14px;

        min-height: 58px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .property-eligibility-section {

        padding: 22px 12px 45px !important;
    }


    .property-eligibility-container {

        width: 100% !important;
    }


    /* =====================================================
       TABS
    ===================================================== */

    .property-eligibility-tabs {

        display: flex !important;

        width: 100% !important;

        overflow-x: auto !important;

        overflow-y: hidden !important;

        gap: 5px !important;

        padding: 4px !important;

        margin-bottom: 30px !important;

        border-radius: 9px !important;

        scrollbar-width: none;
    }

    .property-eligibility-tabs::-webkit-scrollbar {
        display: none;
    }


    .property-eligibility-tab {

        flex: 0 0 145px !important;

        width: 145px !important;

        min-width: 145px !important;

        min-height: 58px !important;

        padding: 7px 8px !important;

        font-size: 13px !important;

        line-height: 1.15 !important;

        border-radius: 7px !important;

        white-space: normal !important;
    }


    /* =====================================================
       CONTENT
    ===================================================== */

    .property-eligibility-grid {

        display: flex !important;

        flex-direction: column !important;

        gap: 30px !important;

        width: 100% !important;
    }


    .property-eligibility-column {

        width: 100% !important;
    }


    /* =====================================================
       TITLES
    ===================================================== */

    .property-column-title {

        margin-bottom: 15px !important;

        font-size: 18px !important;

        line-height: 1.3 !important;
    }


    /* =====================================================
       CARDS
    ===================================================== */

    .property-criteria-list,
    .property-document-list {

        gap: 14px !important;
    }


    .property-criteria-card,
    .property-document-card {

        width: 100% !important;

        min-height: 64px !important;

        padding: 12px !important;

        gap: 12px !important;

        border-radius: 11px !important;
    }


    /* =====================================================
       ICON
    ===================================================== */

    .property-card-icon,
    .property-document-icon {

        width: 40px !important;

        height: 40px !important;

        min-width: 40px !important;
    }


    .property-card-icon i {

        font-size: 19px !important;
    }


    .property-document-icon i {

        font-size: 17px !important;
    }


    /* =====================================================
       TEXT
    ===================================================== */

    .property-card-text,
    .property-document-card {

        font-size: 14px !important;

        line-height: 1.35 !important;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .property-eligibility-section {

        padding-left: 10px !important;

        padding-right: 10px !important;
    }


    .property-eligibility-tab {

        flex-basis: 135px !important;

        width: 135px !important;

        min-width: 135px !important;

        font-size: 12px !important;
    }


    .property-column-title {

        font-size: 17px !important;
    }


    .property-criteria-card,
    .property-document-card {

        padding: 11px !important;

        gap: 11px !important;
    }


    .property-card-icon,
    .property-document-icon {

        width: 38px !important;

        height: 38px !important;

        min-width: 38px !important;
    }


    .property-card-text,
    .property-document-card {

        font-size: 13px !important;

        line-height: 1.35 !important;
    }

}




/* =========================================================
   PROPERTY OVERVIEW SECTION
========================================================= */

.property-overview-section {
    width: 100%;
    background: #f8fafc;
    padding: 35px 20px 55px;
    overflow: hidden;
}


/* MAIN CONTAINER */

.property-overview-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.property-overview-heading {
    text-align: center;
    margin-bottom: 45px;
}

.property-overview-label {
    color: #2875df;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 8px;
}

.property-overview-heading h2 {
    margin: 0 0 8px;
    color: #333333;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 600;
}

.property-overview-heading p {
    margin: 0;
    color: #727272;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 400;
}


/* =========================================================
   MAIN 3 COLUMN AREA
========================================================= */

.property-overview-content {
    display: grid;
    grid-template-columns: 1fr 340px 1fr;
    align-items: center;
    column-gap: 25px;
}


/* =========================================================
   FEATURES
========================================================= */

.property-features {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 350px;
}

.property-features-left {
    align-items: flex-start;
}

.property-features-right {
    align-items: flex-start;
}


/* FEATURE */

.property-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 65px;
}


/* =========================================================
   ICON BOX
========================================================= */

.property-feature-icon {
    width: 41px;
    height: 41px;
    min-width: 41px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #e5efff;
    border-radius: 6px;

    color: #2875df;

    font-size: 19px;
}


/* ICON */

.property-feature-icon i {
    color: #2875df;
}


/* =========================================================
   FEATURE TEXT
========================================================= */

.property-feature-text {
    color: #252525;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 500;
}


/* =========================================================
   CENTER IMAGE
========================================================= */

.property-overview-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/* IMAGE WRAPPER */

.property-image-wrapper {
    width: 330px;
    height: 250px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* IMAGE */

.property-main-image {
    width: 100%;
    max-width: 330px;
    height: auto;
    object-fit: contain;
    display: block;
}


/* =========================================================
   APPLY BUTTON
========================================================= */

.property-apply-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 168px;
    height: 50px;

    background: #2875df;
    color: #ffffff;

    border-radius: 8px;

    text-decoration: none;

    font-size: 15px;
    font-weight: 600;

    margin-top: 5px;

    transition: all 0.3s ease;
}

.property-apply-btn:hover {
    background: #1f64c5;
    color: #ffffff;
    transform: translateY(-2px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .property-overview-section {
        padding: 35px 20px 50px;
    }

    .property-overview-content {
        grid-template-columns: 1fr 280px 1fr;
        column-gap: 12px;
    }

    .property-image-wrapper {
        width: 280px;
        height: 220px;
    }

    .property-main-image {
        max-width: 280px;
    }

    .property-feature-text {
        font-size: 13px;
    }

    .property-feature-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 17px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .property-overview-section {
        padding: 35px 15px 45px;
    }

    .property-overview-heading {
        margin-bottom: 25px;
    }

    .property-overview-label {
        font-size: 14px;
    }

    .property-overview-heading h2 {
        font-size: 22px;
    }

    .property-overview-heading p {
        font-size: 14px;
        line-height: 1.5;
    }

    .desktop-break {
        display: none;
    }


    /* STACK EVERYTHING */

    .property-overview-content {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }


    /* CENTER IMAGE FIRST */

    .property-overview-center {
        order: 1;
        width: 100%;
    }


    .property-features-left {
        order: 2;
    }

    .property-features-right {
        order: 3;
    }


    /* FEATURES */

    .property-features {
        width: 100%;
        height: auto;
        gap: 15px;
    }


    .property-feature {
        width: 100%;
        min-height: auto;
        gap: 12px;
    }


    .property-feature-text {
        font-size: 14px;
    }


    /* IMAGE */

    .property-image-wrapper {
        width: 100%;
        max-width: 320px;
        height: 220px;
    }

    .property-main-image {
        width: 100%;
        max-width: 320px;
    }


    /* BUTTON */

    .property-apply-btn {
        margin-bottom: 15px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .property-overview-heading h2 {
        font-size: 20px;
    }

    .property-overview-heading p {
        font-size: 13px;
    }

    .property-image-wrapper {
        max-width: 290px;
        height: 200px;
    }

    .property-main-image {
        max-width: 290px;
    }

}



/* =========================================================
   MAIN SECTION
========================================================= */

.home-loan-emi-section {

    width: 100%;

    background: #edf4fd;

    padding: 45px 25px 60px;

    box-sizing: border-box;

    overflow: hidden;
}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.home-loan-emi-wrapper {

    width: 100%;

    max-width: 1120px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 70px;

    box-sizing: border-box;
}


/* =========================================================
   LEFT SIDE
========================================================= */

.home-loan-emi-left {

    flex: 1;

    min-width: 0;
}


.home-loan-emi-left h2 {

    margin: 0 0 12px;

    color: #333333;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 34px;

    font-weight: 600;

    line-height: 1.15;

    letter-spacing: -0.5px;
}


.home-loan-emi-left p {

    margin: 0 0 22px;

    color: #707070;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    line-height: 1.4;
}


/* =========================================================
   BUTTON
========================================================= */

.home-loan-emi-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    min-width: 215px;

    height: 48px;

    padding: 0 22px;

    background: #2878e5;

    color: #ffffff !important;

    border-radius: 7px;

    text-decoration: none !important;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    font-weight: 600;

    box-sizing: border-box;

    transition:
        all .25s ease;
}


.home-loan-emi-btn:hover {

    background: #1d66cc;

    color: #ffffff !important;

    transform: translateY(-1px);

    box-shadow:
        0 5px 14px rgba(40,120,229,.20);
}


.home-loan-emi-btn span {

    font-size: 23px;

    line-height: 1;
}


/* =========================================================
   RIGHT EMI CARD - LARGE
========================================================= */

.home-loan-emi-box {

    flex: 0 0 560px;

    width: 560px;

    min-height: 275px;

    padding: 36px 34px 30px;

    box-sizing: border-box;

    border-radius: 17px;

    background:
        linear-gradient(
            115deg,
            #2878e5 0%,
            #493ddd 48%,
            #b500d9 100%
        );

    color: #ffffff;

    box-shadow:
        0 7px 20px rgba(41,92,171,.13);
}


/* =========================================================
   CARD TITLE
========================================================= */

.emi-box-title {

    margin-bottom: 32px;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;

    font-weight: 400;
}


/* =========================================================
   MAIN EMI
========================================================= */

.emi-amount {

    margin-bottom: 12px;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 38px;

    font-weight: 700;

    line-height: 1;
}


.emi-amount span {

    margin-left: 3px;

    font-size: 18px;

    font-weight: 400;
}


/* =========================================================
   LOAN DETAILS
========================================================= */

.emi-info {

    margin-bottom: 34px;

    color: rgba(255,255,255,.92);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    line-height: 1.4;
}


/* =========================================================
   BOTTOM VALUES
========================================================= */

.emi-bottom {

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 25px;
}


.emi-value {

    display: flex;

    flex-direction: column;

    min-width: 0;
}


.emi-value strong {

    margin-bottom: 6px;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 24px;

    font-weight: 700;

    line-height: 1;
}


.emi-value small {

    color: rgba(255,255,255,.90);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    line-height: 1.2;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .home-loan-emi-wrapper {

        max-width: 1120px;

        gap: 75px;
    }


    .home-loan-emi-box {

        flex-basis: 580px;

        width: 580px;

        min-height: 285px;

        padding:
            38px
            36px
            32px;
    }


    .home-loan-emi-left h2 {

        font-size: 35px;
    }

}


/* =========================================================
   DESKTOP 992 - 1199
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .home-loan-emi-wrapper {

        max-width: 1000px;

        gap: 45px;
    }


    .home-loan-emi-box {

        flex-basis: 520px;

        width: 520px;

        min-height: 265px;

        padding:
            32px
            30px
            28px;
    }


    .home-loan-emi-left h2 {

        font-size: 31px;
    }


    .emi-amount {

        font-size: 35px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .home-loan-emi-section {

        padding:
            40px
            25px
            55px;
    }


    .home-loan-emi-wrapper {

        gap: 30px;

        max-width: 900px;
    }


    .home-loan-emi-left h2 {

        font-size: 28px;
    }


    .home-loan-emi-left p {

        font-size: 13px;
    }


    .home-loan-emi-box {

        flex-basis: 450px;

        width: 450px;

        min-height: 250px;

        padding:
            29px
            25px
            26px;
    }


    .emi-box-title {

        font-size: 13px;

        margin-bottom: 27px;
    }


    .emi-amount {

        font-size: 30px;
    }


    .emi-amount span {

        font-size: 15px;
    }


    .emi-info {

        font-size: 10px;

        margin-bottom: 28px;
    }


    .emi-bottom {

        gap: 12px;
    }


    .emi-value strong {

        font-size: 19px;
    }


    .emi-value small {

        font-size: 10px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .home-loan-emi-section {

        padding:
            38px
            15px
            48px;
    }


    .home-loan-emi-wrapper {

        flex-direction: column;

        align-items: stretch;

        gap: 30px;
    }


    .home-loan-emi-left {

        width: 100%;

        text-align: center;
    }


    .home-loan-emi-left h2 {

        font-size: 27px;

        line-height: 1.2;

        letter-spacing: 0;
    }


    .home-loan-emi-left p {

        font-size: 13px;

        line-height: 1.45;
    }


    .home-loan-emi-btn {

        min-width: 205px;

        height: 46px;

        font-size: 13px;
    }


    /* LARGE CARD ON MOBILE */

    .home-loan-emi-box {

        width: 100%;

        min-width: 0;

        flex: none;

        min-height: 260px;

        padding:
            29px
            23px
            27px;

        border-radius: 15px;
    }


    .emi-box-title {

        font-size: 13px;

        margin-bottom: 27px;
    }


    .emi-amount {

        font-size: 30px;
    }


    .emi-amount span {

        font-size: 15px;
    }


    .emi-info {

        font-size: 10px;

        margin-bottom: 29px;
    }


    .emi-bottom {

        gap: 10px;
    }


    .emi-value strong {

        font-size: 18px;
    }


    .emi-value small {

        font-size: 10px;
    }

}


/* =========================================================
   IPHONE 376 - 575
========================================================= */

@media (min-width: 376px) and (max-width: 575px) {

    .home-loan-emi-section {

        padding:
            35px
            14px
            45px;
    }


    .home-loan-emi-wrapper {

        gap: 28px;
    }


    .home-loan-emi-left h2 {

        font-size: 25px;
    }


    .home-loan-emi-left p {

        font-size: 12px;
    }


    .home-loan-emi-box {

        min-height: 255px;

        padding:
            27px
            19px
            25px;
    }


    .emi-box-title {

        font-size: 12px;

        margin-bottom: 24px;
    }


    .emi-amount {

        font-size: 27px;
    }


    .emi-amount span {

        font-size: 14px;
    }


    .emi-info {

        font-size: 9px;

        margin-bottom: 26px;

        white-space: nowrap;
    }


    .emi-bottom {

        gap: 7px;
    }


    .emi-value strong {

        font-size: 17px;
    }


    .emi-value small {

        font-size: 9px;
    }

}


/* =========================================================
   IPHONE SE / SMALL MOBILE
========================================================= */

@media (max-width: 375px) {

    .home-loan-emi-section {

        padding:
            32px
            11px
            42px;
    }


    .home-loan-emi-wrapper {

        gap: 25px;
    }


    .home-loan-emi-left h2 {

        font-size: 23px;
    }


    .home-loan-emi-left p {

        font-size: 11px;

        line-height: 1.45;
    }


    .home-loan-emi-btn {

        min-width: 195px;

        height: 44px;

        font-size: 12px;
    }


    .home-loan-emi-box {

        min-height: 245px;

        padding:
            24px
            15px
            22px;

        border-radius: 13px;
    }


    .emi-box-title {

        font-size: 10px;

        margin-bottom: 21px;
    }


    .emi-amount {

        font-size: 23px;
    }


    .emi-amount span {

        font-size: 12px;
    }


    .emi-info {

        font-size: 8px;

        margin-bottom: 23px;

        white-space: nowrap;
    }


    .emi-bottom {

        gap: 4px;
    }


    .emi-value strong {

        font-size: 14px;
    }


    .emi-value small {

        font-size: 8px;
    }

}

/* overderaft facility */


/* =========================================================
   MAIN HERO
========================================================= */



/* =========================================================
   DARK OVERLAY
========================================================= */

.home-loan-overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.45) 30%,
        rgba(0, 0, 0, 0.08) 65%,
        rgba(0, 0, 0, 0) 100%
    );

    z-index: 1;
}


/* =========================================================
   CONTAINER
========================================================= */

.home-loan-container {
    position: relative;
    z-index: 2;

    min-height: 525px;

    display: flex;
    align-items: center;
}


/* =========================================================
   CONTENT
========================================================= */

.home-loan-content {
    width: 50%;

    padding-left: 0;
    padding-top: 5px;
    padding-bottom: 5px;
}


/* =========================================================
   HEADING
========================================================= */

.home-loan-content h1 {
    margin: 0 0 8px 0;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 44px;
    line-height: 1.15;

    font-weight: 700;

    letter-spacing: 0;
}


.home-loan-content h1 span {
    color: #2f80ed;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.home-loan-content p {
    margin: 0 0 15px 0;

    color: rgba(255, 255, 255, 0.90);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;
    line-height: 1.5;

    font-weight: 400;
}


/* =========================================================
   APPLY NOW BUTTON
========================================================= */

.home-loan-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 86px;
    height: 35px;

    padding: 0 17px;

    background: #2878e5;

    color: #ffffff !important;

    border-radius: 4px;

    text-decoration: none !important;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;
    font-weight: 600;

    transition: all 0.3s ease;
}


.home-loan-btn:hover {
    background: #1265d2;

    color: #ffffff !important;

    transform: translateY(-1px);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.20);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .home-loan-hero {
        min-height: 525px;

        background-size: cover;

        background-position: center center;
    }


    .home-loan-container {
        min-height: 525px;
    }


    .home-loan-content {
        width: 50%;
    }


    .home-loan-content h1 {
        font-size: 44px;
    }


    .home-loan-content p {
        font-size: 15px;
    }
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .home-loan-hero {
        min-height: 450px;

        background-size: cover;

        background-position: center center;
    }


    .home-loan-container {
        min-height: 450px;
    }


    .home-loan-content {
        width: 50%;
    }


    .home-loan-content h1 {
        font-size: 36px;
    }


    .home-loan-content p {
        font-size: 14px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .home-loan-hero {

        min-height: 360px;

        /*
         * Keep the complete image visible better
         */
        background-size: 100% 100%;

        background-position: center center;

        background-repeat: no-repeat;
    }


    .home-loan-container {

        min-height: 360px;

        display: flex;

        align-items: center;

        padding-left: 30px;
        padding-right: 30px;

        box-sizing: border-box;
    }


    .home-loan-content {

        width: 52%;

        padding: 0;
    }


    .home-loan-content h1 {

        font-size: 29px;

        line-height: 1.18;

        margin-bottom: 9px;
    }


    .home-loan-content p {

        font-size: 12px;

        line-height: 1.45;

        margin-bottom: 15px;
    }


    .home-loan-btn {

        height: 35px;

        min-width: 86px;

        padding: 0 15px;

        font-size: 12px;
    }


    .home-loan-overlay {

        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.68) 0%,
            rgba(0, 0, 0, 0.43) 40%,
            rgba(0, 0, 0, 0.10) 75%,
            rgba(0, 0, 0, 0) 100%
        );
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .home-loan-hero {

        min-height: 300px;

        /*
         * IMPORTANT:
         * Cover was cropping the family image.
         * 100% 100% keeps the whole banner visible.
         */
        background-size: 100% 100%;

        background-position: center center;

        background-repeat: no-repeat;
    }


    .home-loan-container {

        min-height: 300px;

        width: 100%;

        display: flex;

        align-items: center;

        padding-top: 30px;
        padding-bottom: 30px;
        padding-left: 22px;
        padding-right: 22px;

        box-sizing: border-box;
    }


    .home-loan-content {

        width: 58%;

        padding: 0;
    }


    .home-loan-content h1 {

        font-size: 22px;

        line-height: 1.18;

        margin: 0 0 9px 0;
    }


    .home-loan-content p {

        font-size: 11px;

        line-height: 1.5;

        margin: 0 0 15px 0;
    }


    .home-loan-btn {

        height: 34px;

        min-width: 82px;

        padding: 0 15px;

        font-size: 11px;

        border-radius: 4px;
    }


    .home-loan-overlay {

        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.50) 42%,
            rgba(0, 0, 0, 0.12) 78%,
            rgba(0, 0, 0, 0.02) 100%
        );
    }
}


/* =========================================================
   IPHONE / SMALL MOBILE
========================================================= */

@media (max-width: 575px) {

    .home-loan-hero {

        min-height: 270px;

        /*
         * Full banner image visible
         */
        background-size: 100% 100%;

        background-position: center center;

        background-repeat: no-repeat;
    }


    .home-loan-container {

        min-height: 270px;

        padding-top: 25px;
        padding-bottom: 25px;
        padding-left: 18px;
        padding-right: 18px;

        align-items: center;
    }


    .home-loan-content {

        width: 58%;

        max-width: 230px;

        padding: 0;
    }


    .home-loan-content h1 {

        font-size: 20px;

        line-height: 1.18;

        margin-bottom: 8px;
    }


    .home-loan-content p {

        font-size: 10px;

        line-height: 1.45;

        margin-bottom: 13px;
    }


    .home-loan-btn {

        height: 33px;

        min-width: 82px;

        padding: 0 14px;

        font-size: 10px;
    }


    .home-loan-overlay {

        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.70) 0%,
            rgba(0, 0, 0, 0.48) 43%,
            rgba(0, 0, 0, 0.15) 75%,
            rgba(0, 0, 0, 0.02) 100%
        );
    }
}


/* =========================================================
   IPHONE SE / 375px
========================================================= */

@media (max-width: 375px) {

    .home-loan-hero {

        min-height: 245px;

        background-size: 100% 100%;

        background-position: center center;
    }


    .home-loan-container {

        min-height: 245px;

        padding-top: 22px;
        padding-bottom: 22px;
        padding-left: 15px;
        padding-right: 15px;
    }


    .home-loan-content {

        width: 58%;

        max-width: 210px;
    }


    .home-loan-content h1 {

        font-size: 18px;

        line-height: 1.17;

        margin-bottom: 7px;
    }


    .home-loan-content p {

        font-size: 9px;

        line-height: 1.4;

        margin-bottom: 12px;
    }


    .home-loan-btn {

        height: 31px;

        min-width: 78px;

        padding: 0 12px;

        font-size: 9px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .home-loan-hero {

        min-height: 230px;

        background-size: 100% 100%;

        background-position: center center;
    }


    .home-loan-container {

        min-height: 230px;

        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 13px;
        padding-right: 13px;
    }


    .home-loan-content {

        width: 58%;

        max-width: 195px;
    }


    .home-loan-content h1 {

        font-size: 17px;

        line-height: 1.17;
    }


    .home-loan-content p {

        font-size: 8.5px;

        line-height: 1.4;
    }


    .home-loan-btn {

        height: 30px;

        min-width: 75px;

        padding: 0 11px;

        font-size: 9px;
    }
}


/* =========================================================
   EXTRA SMALL DEVICES
========================================================= */

@media (max-width: 320px) {

    .home-loan-hero {

        min-height: 215px;

        background-size: 100% 100%;
    }


    .home-loan-container {

        min-height: 215px;

        padding-left: 12px;
        padding-right: 12px;
    }


    .home-loan-content {

        width: 57%;
    }


    .home-loan-content h1 {

        font-size: 16px;
    }


    .home-loan-content p {

        font-size: 8px;
    }


    .home-loan-btn {

        height: 29px;

        min-width: 72px;

        font-size: 8px;
    }
}


/* =========================================================
   MAIN SECTION
========================================================= */

.property-loan-why {
    width: 100%;
    background: #f8fafc;
    padding: 25px 20px 60px;
    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.property-loan-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.property-loan-heading {
    text-align: center;
    margin-bottom: 48px;
}

.property-loan-heading h2 {
    margin: 0 0 4px;

    font-size: 26px;
    line-height: 1.3;

    font-weight: 600;
    color: #333333;
}


/* FIRST PARAGRAPH */

.property-loan-intro {
    margin: 0 auto 14px;

    font-size: 15px;
    line-height: 1.25;

    font-weight: 400;
}


/* BLUE TEXT */

.blue-text {
    color: #2875df;
}


/* SECOND PARAGRAPH */

.property-loan-description {
    margin: 0 auto;

    color: #777777;

    font-size: 15px;
    line-height: 1.35;

    font-weight: 400;
}


/* =========================================================
   CARDS GRID
========================================================= */

.property-loan-cards {
    display: grid;

    grid-template-columns: repeat(6, 1fr);

    column-gap: 32px;
    row-gap: 34px;

    align-items: start;
}


/* =========================================================
   CARD
========================================================= */

.property-loan-card {

    grid-column: span 2;

    min-height: 218px;

    padding: 32px 24px 25px;

    background: #ffffff;

    border: 1px solid #4d7ff0;

    border-radius: 16px;

    box-shadow: 0 8px 22px rgba(38, 102, 220, 0.12);

    box-sizing: border-box;

    transition: all 0.3s ease;
}


/* =========================================================
   BOTTOM CARDS
========================================================= */

/*
   4th card starts around 18%
   5th card starts around 50%
   This creates the centered 2-card row
*/

.property-loan-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.property-loan-card:nth-child(5) {
    grid-column: 4 / span 2;
}


/* =========================================================
   ICON BOX
========================================================= */

.property-loan-icon {

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #e6efff;

    border-radius: 5px;

    margin-bottom: 25px;
}


/* ICON */

.property-loan-icon i {

    font-size: 19px;

    color: #2875df;
}


/* =========================================================
   CARD TITLE
========================================================= */

.property-loan-card h3 {

    margin: 0 0 8px;

    color: #3b3b3b;

    font-size: 22px;

    line-height: 1.2;

    font-weight: 600;
}


/* =========================================================
   CARD DESCRIPTION
========================================================= */

.property-loan-card p {

    margin: 0;

    color: #707070;

    font-size: 15px;

    line-height: 1.25;

    font-weight: 400;
}


/* =========================================================
   HOVER
========================================================= */

.property-loan-card:hover {

    transform: translateY(-3px);

    box-shadow: 0 12px 28px rgba(38, 102, 220, 0.17);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .property-loan-cards {

        grid-template-columns: repeat(2, 1fr);

        gap: 25px;

    }

    .property-loan-card,
    .property-loan-card:nth-child(4),
    .property-loan-card:nth-child(5) {

        grid-column: auto;

    }

    .property-loan-card:last-child {

        grid-column: 1 / -1;

        max-width: calc(50% - 12px);

        margin: 0 auto;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .property-loan-why {

        padding: 30px 15px 45px;

    }


    .property-loan-heading {

        margin-bottom: 30px;

    }


    .property-loan-heading h2 {

        font-size: 23px;

    }


    .property-loan-intro {

        font-size: 14px;

        line-height: 1.45;

    }


    .property-loan-description {

        font-size: 14px;

        line-height: 1.45;

    }


    .desktop-only {

        display: none;

    }


    .property-loan-cards {

        display: flex;

        flex-direction: column;

        gap: 20px;

    }


    .property-loan-card,
    .property-loan-card:nth-child(4),
    .property-loan-card:nth-child(5) {

        width: 100%;

        max-width: 100%;

        min-height: auto;

        margin: 0;

        padding: 25px 20px;

    }


    .property-loan-card h3 {

        font-size: 20px;

    }


    .property-loan-card p {

        font-size: 14px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .property-loan-heading h2 {

        font-size: 21px;

    }


    .property-loan-card {

        border-radius: 14px;

    }


    .property-loan-card h3 {

        font-size: 19px;

    }

}

    /* =========================================================
   PROPERTY OVERVIEW - RESPONSIVE CSS
========================================================= */

.property-overview-section {
    width: 100%;
    padding: 35px 20px 55px;
    background: #f8fafc;
    overflow: hidden;
    box-sizing: border-box;
}

.property-overview-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.property-overview-heading {
    text-align: center;
    margin-bottom: 45px;
}

.property-overview-heading h4 {
    margin-bottom: 8px;
}

.property-overview-heading h2 {
    margin-bottom: 10px;
}

.property-overview-heading p {
    margin: 0 auto;
    max-width: 1100px;
    color: #777;
    font-size: 15px;
    line-height: 1.45;
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.property-overview-content {
    display: grid;
    grid-template-columns: 1fr 340px 1fr;
    align-items: center;
    gap: 25px;
}


/* =========================================================
   FEATURES
========================================================= */

.property-features {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 350px;
}

.property-feature {
    display: flex;
    align-items: center;
    gap: 12px;
}

.property-feature-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #e5efff;
    border-radius: 6px;

    color: #2875df;
}

.property-feature-icon i {
    font-size: 18px;
    color: #2875df;
}

.property-feature-text {
    color: #252525;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 500;
}


/* =========================================================
   CENTER IMAGE
========================================================= */

.property-overview-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.property-image-wrapper {
    width: 340px;
    height: 250px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.property-main-image {
    display: block;
    width: 100%;
    max-width: 340px;
    height: auto;
    object-fit: contain;
}


/* =========================================================
   APPLY BUTTON
========================================================= */

.property-apply-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 168px;
    height: 50px;

    margin-top: 5px;

    background: #2875df;
    color: #fff;

    border-radius: 8px;

    text-decoration: none;

    font-size: 15px;
    font-weight: 600;

    transition: 0.3s ease;
}

.property-apply-btn:hover {
    background: #1f64c5;
    color: #fff;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .property-overview-section {
        padding: 35px 20px 50px;
    }

    .property-overview-content {
        grid-template-columns: 1fr 280px 1fr;
        gap: 15px;
    }

    .property-features {
        height: 320px;
    }

    .property-image-wrapper {
        width: 280px;
        height: 220px;
    }

    .property-main-image {
        max-width: 280px;
    }

    .property-feature-text {
        font-size: 13px;
    }

    .property-feature-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .property-overview-heading p {
        font-size: 14px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .property-overview-section {
        padding: 30px 15px 45px;
    }

    .property-overview-container {
        width: 100%;
    }


    /* HEADING */

    .property-overview-heading {
        margin-bottom: 25px;
    }

    .property-overview-heading h4 {
        font-size: 14px;
        margin-bottom: 7px;
    }

    .property-overview-heading h2 {
        font-size: 23px;
        line-height: 1.3;
        margin-bottom: 12px;
    }

    .property-overview-heading p {
        width: 100%;
        font-size: 14px;
        line-height: 1.5;
    }


    /* REMOVE DESKTOP BR */

    .desktop-break {
        display: none;
    }


    /* =====================================================
       MOBILE CONTENT
    ===================================================== */

    .property-overview-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 20px;
    }


    /* CENTER IMAGE FIRST */

    .property-overview-center {
        order: 1;
        width: 100%;
    }


    /* LEFT FEATURES */

    .property-features-left {
        order: 2;
    }


    /* RIGHT FEATURES */

    .property-features-right {
        order: 3;
    }


    /* =====================================================
       IMAGE
    ===================================================== */

    .property-image-wrapper {
        width: 100%;
        max-width: 320px;
        height: 220px;
        margin: 0 auto;
    }

    .property-main-image {
        width: 100%;
        max-width: 320px;
        height: auto;
    }


    /* =====================================================
       BUTTON
    ===================================================== */

    .property-apply-btn {
        width: 165px;
        height: 48px;
        margin: 0 auto;
    }


    /* =====================================================
       FEATURES
    ===================================================== */

    .property-features {
        width: 100%;
        height: auto;

        display: flex;
        flex-direction: column;

        gap: 18px;
    }

    .property-feature {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .property-feature-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
    }

    .property-feature-text {
        font-size: 14px;
        line-height: 1.35;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .property-overview-section {
        padding: 25px 12px 40px;
    }

    .property-overview-heading h4 {
        font-size: 13px;
    }

    .property-overview-heading h2 {
        font-size: 20px;
    }

    .property-overview-heading p {
        font-size: 13px;
        line-height: 1.5;
    }


    .property-image-wrapper {
        max-width: 285px;
        height: 195px;
    }

    .property-main-image {
        max-width: 285px;
    }


    .property-feature {
        align-items: flex-start;
    }

    .property-feature-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .property-feature-icon i {
        font-size: 17px;
    }

    .property-feature-text {
        font-size: 13px;
        line-height: 1.4;
        padding-top: 2px;
    }


    .property-apply-btn {
        width: 155px;
        height: 46px;
        font-size: 14px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .property-overview-heading h2 {
        font-size: 19px;
    }

    .property-overview-heading p {
        font-size: 12.5px;
    }

    .property-image-wrapper {
        max-width: 260px;
        height: 180px;
    }

    .property-main-image {
        max-width: 260px;
    }

    .property-feature-text {
        font-size: 12.5px;
    }
}

/* =========================================================
   PROPERTY OVERVIEW - MOBILE FIX
========================================================= */

@media (max-width: 767px) {

    .property-overview-section {
        width: 100% !important;
        padding: 25px 15px 40px !important;
        margin: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .property-overview-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }


    /* =====================================================
       HEADING
    ===================================================== */

    .property-overview-heading {
        width: 100% !important;
        text-align: center !important;
        margin: 0 0 25px !important;
        padding: 0 !important;
    }

    .property-overview-heading h4 {
        margin: 0 0 7px !important;
        font-size: 14px !important;
        line-height: 1.3 !important;
    }

    .property-overview-heading h2 {
        margin: 0 0 12px !important;
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    .property-overview-heading p {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }

    .desktop-break {
        display: none !important;
    }


    /* =====================================================
       MAIN CONTENT
    ===================================================== */

    .property-overview-content {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }


    /* =====================================================
       CENTER IMAGE SECTION
    ===================================================== */

    .property-overview-center {
        order: 1 !important;

        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* IMAGE BOX */

    .property-image-wrapper {
        width: 100% !important;
        max-width: 300px !important;

        height: 210px !important;
        min-height: 210px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        overflow: hidden !important;
        box-sizing: border-box !important;
    }


    /* ACTUAL IMAGE */

    .property-main-image {
        display: block !important;

        width: auto !important;
        max-width: 100% !important;

        height: 205px !important;
        max-height: 205px !important;

        object-fit: contain !important;

        margin: 0 auto !important;
        padding: 0 !important;
    }


    /* =====================================================
       APPLY BUTTON
    ===================================================== */

    .property-apply-btn {
        order: 2 !important;

        width: 210px !important;
        max-width: 210px !important;

        height: 48px !important;
        min-height: 48px !important;

        margin: 5px auto 28px !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: #2875df !important;
        color: #ffffff !important;

        border-radius: 8px !important;

        font-size: 16px !important;
        line-height: 1 !important;
        font-weight: 600 !important;

        text-decoration: none !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       LEFT + RIGHT FEATURES
    ===================================================== */

    .property-features {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 16px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .property-features-left {
        order: 3 !important;
    }

    .property-features-right {
        order: 4 !important;

        margin-top: 16px !important;
    }


    /* =====================================================
       EACH FEATURE
    ===================================================== */

    .property-feature {
        width: 100% !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;

        gap: 14px !important;

        margin: 0 !important;
        padding: 0 !important;

        min-height: 50px !important;
    }


    /* =====================================================
       ICON
    ===================================================== */

    .property-feature-icon {
        width: 46px !important;
        min-width: 46px !important;

        height: 46px !important;
        min-height: 46px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: #e5efff !important;

        border-radius: 7px !important;

        margin: 0 !important;
        padding: 0 !important;

        flex-shrink: 0 !important;
    }


    .property-feature-icon i {
        font-size: 19px !important;
        line-height: 1 !important;
        color: #2875df !important;
    }


    /* =====================================================
       FEATURE TEXT
    ===================================================== */

    .property-feature-text {
        width: auto !important;
        max-width: calc(100% - 60px) !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #252525 !important;

        font-size: 14px !important;
        line-height: 1.4 !important;

        font-weight: 500 !important;

        text-align: left !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
    }


    /* REMOVE FORCED DESKTOP LINE BREAKS */

    .property-feature-text br {
        display: none !important;
    }

}


/* =========================================================
   SMALL MOBILE - 480px
========================================================= */

@media (max-width: 480px) {

    .property-overview-section {
        padding: 22px 15px 35px !important;
    }


    .property-overview-heading {
        margin-bottom: 20px !important;
    }


    .property-overview-heading h4 {
        font-size: 13px !important;
    }


    .property-overview-heading h2 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }


    .property-overview-heading p {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
    }


    /* SMALLER IMAGE */

    .property-image-wrapper {
        width: 100% !important;
        max-width: 280px !important;

        height: 190px !important;
        min-height: 190px !important;
    }


    .property-main-image {
        height: 185px !important;
        max-height: 185px !important;
        max-width: 280px !important;
    }


    /* BUTTON */

    .property-apply-btn {
        width: 200px !important;
        max-width: 200px !important;

        height: 47px !important;
        min-height: 47px !important;

        margin-top: 5px !important;
        margin-bottom: 25px !important;

        font-size: 15px !important;
    }


    /* FEATURES */

    .property-features {
        gap: 14px !important;
    }


    .property-feature {
        gap: 12px !important;
        min-height: 48px !important;
    }


    .property-feature-icon {
        width: 43px !important;
        min-width: 43px !important;

        height: 43px !important;
        min-height: 43px !important;
    }


    .property-feature-icon i {
        font-size: 18px !important;
    }


    .property-feature-text {
        font-size: 13.5px !important;
        line-height: 1.4 !important;

        max-width: calc(100% - 55px) !important;
    }

}


/* =========================================================
   VERY SMALL MOBILE - 360px
========================================================= */

@media (max-width: 360px) {

    .property-overview-heading h2 {
        font-size: 19px !important;
    }


    .property-overview-heading p {
        font-size: 12px !important;
    }


    .property-image-wrapper {
        max-width: 255px !important;
        height: 175px !important;
        min-height: 175px !important;
    }


    .property-main-image {
        max-width: 255px !important;
        height: 170px !important;
        max-height: 170px !important;
    }


    .property-apply-btn {
        width: 185px !important;
        max-width: 185px !important;
    }


    .property-feature-icon {
        width: 40px !important;
        min-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;
    }


    .property-feature-text {
        font-size: 13px !important;
        max-width: calc(100% - 52px) !important;
    }

}




/* =========================================================
   MAIN SECTION
========================================================= */

.property-benefits-section {

    width: 100%;

    background: #f8fafc;

    padding: 25px 15px 70px;

    overflow: hidden;

    box-sizing: border-box;
}


/* =========================================================
   CONTAINER
========================================================= */

.property-benefits-container {

    width: 100%;

    max-width: 1250px;

    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.property-benefits-heading {

    text-align: center;

    margin-bottom: 48px;
}


.property-benefits-heading h2 {

    margin: 0 0 5px;

    color: #333333;

    font-size: 26px;

    line-height: 1.3;

    font-weight: 600;
}


.property-benefits-heading p {

    margin: 0;

    color: #707070;

    font-size: 15px;

    line-height: 1.4;

    font-weight: 400;
}


/* =========================================================
   GRID
========================================================= */

.property-benefits-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    column-gap: 32px;

    row-gap: 50px;

    width: 100%;
}


/* =========================================================
   CARD
========================================================= */

.property-benefit-card {

    width: 100%;

    min-height: 220px;

    box-sizing: border-box;

    padding: 32px 24px 25px;

    background: #ffffff;

    border: 1px solid #4d7ff0;

    border-radius: 16px;

    box-shadow: 0 7px 20px rgba(40, 117, 223, 0.10);

    transition: all 0.3s ease;
}


/* =========================================================
   ICON BOX
========================================================= */

.property-benefit-icon {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e5efff;

    border-radius: 5px;

    margin-bottom: 26px;
}


.property-benefit-icon i {

    color: #2875df;

    font-size: 19px;

    line-height: 1;
}


/* =========================================================
   CARD TITLE
========================================================= */

.property-benefit-card h3 {

    margin: 0 0 8px;

    color: #3b3b3b;

    font-size: 22px;

    line-height: 1.25;

    font-weight: 600;
}


/* =========================================================
   CARD TEXT
========================================================= */

.property-benefit-card p {

    margin: 0;

    color: #555555;

    font-size: 15px;

    line-height: 1.25;

    font-weight: 400;
}


/* =========================================================
   HOVER
========================================================= */

.property-benefit-card:hover {

    transform: translateY(-3px);

    box-shadow: 0 12px 28px rgba(40, 117, 223, 0.16);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .property-benefits-section {

        padding: 30px 20px 55px;
    }

    .property-benefits-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 25px;
    }

    .property-benefit-card {

        min-height: 220px;
    }

    .property-benefit-card h3 {

        font-size: 20px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .property-benefits-section {

        padding: 28px 15px 45px;
    }


    /* HEADING */

    .property-benefits-heading {

        margin-bottom: 30px;
    }


    .property-benefits-heading h2 {

        font-size: 22px;

        line-height: 1.3;
    }


    .property-benefits-heading p {

        font-size: 14px;
    }


    /* ONE CARD PER ROW */

    .property-benefits-grid {

        display: flex;

        flex-direction: column;

        gap: 20px;
    }


    /* CARD */

    .property-benefit-card {

        width: 100%;

        min-height: auto;

        padding: 25px 20px;

        border-radius: 14px;
    }


    /* ICON */

    .property-benefit-icon {

        width: 42px;

        height: 42px;

        margin-bottom: 22px;
    }


    /* TITLE */

    .property-benefit-card h3 {

        font-size: 20px;

        line-height: 1.3;

        margin-bottom: 8px;
    }


    /* TEXT */

    .property-benefit-card p {

        font-size: 14px;

        line-height: 1.45;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .property-benefits-section {

        padding: 25px 12px 40px;
    }


    .property-benefits-heading h2 {

        font-size: 20px;
    }


    .property-benefits-heading p {

        font-size: 13px;
    }


    .property-benefit-card {

        padding: 23px 18px;

        border-radius: 13px;
    }


    .property-benefit-icon {

        width: 40px;

        height: 40px;

        margin-bottom: 20px;
    }


    .property-benefit-icon i {

        font-size: 18px;
    }


    .property-benefit-card h3 {

        font-size: 19px;
    }


    .property-benefit-card p {

        font-size: 13.5px;

        line-height: 1.45;
    }

}





/* =========================================================
   MAIN SECTION
========================================================= */

.property-eligibility-section {
    width: 100%;
    padding: 30px 15px 70px;
    background: #f8fafc;
    box-sizing: border-box;
    overflow: hidden;
}

.property-eligibility-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
}


/* =========================================================
   TABS
========================================================= */

.property-eligibility-tabs {

    width: 100%;

    display: grid;

    grid-template-columns:
        1fr
        1fr
        1.25fr
        1.25fr
        1.2fr;

    gap: 0;

    padding: 4px;

    background: #eaf2fc;

    border-radius: 10px;

    box-sizing: border-box;

    margin-bottom: 48px;
}


/* TAB */

.property-eligibility-tab {

    border: 0;

    background: transparent;

    color: #333;

    min-height: 64px;

    padding: 8px 12px;

    border-radius: 8px;

    font-size: 15px;

    line-height: 1.15;

    font-weight: 500;

    cursor: pointer;

    transition: all 0.25s ease;

    font-family: inherit;
}


/* ACTIVE TAB */

.property-eligibility-tab.active {

    background: #2875df;

    color: #ffffff;

    box-shadow: 0 3px 8px rgba(40,117,223,0.20);
}


/* HOVER */

.property-eligibility-tab:not(.active):hover {

    background: rgba(40,117,223,0.08);

    color: #2875df;
}


/* =========================================================
   TAB CONTENT
========================================================= */

.property-eligibility-tab-content {

    display: none;

    width: 100%;
}

.property-eligibility-tab-content.active {

    display: block;
}


/* =========================================================
   TWO COLUMNS
========================================================= */

.property-eligibility-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 48px;

    align-items: start;
}


/* =========================================================
   COLUMN TITLE
========================================================= */

.property-column-title {

    margin: 0 0 20px;

    color: #333333;

    font-size: 20px;

    line-height: 1.3;

    font-weight: 500;
}


/* =========================================================
   CRITERIA LIST
========================================================= */

.property-criteria-list {

    display: flex;

    flex-direction: column;

    gap: 24px;
}


/* =========================================================
   CRITERIA CARD
========================================================= */

.property-criteria-card {

    width: 100%;

    min-height: 74px;

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 14px 16px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #4d7ff0;

    border-radius: 14px;

    box-shadow:
        0 6px 18px rgba(40,117,223,0.10);

}


/* =========================================================
   CHECK ICON
========================================================= */

.property-card-icon {

    width: 42px;

    height: 42px;

    min-width: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e5efff;

    border-radius: 5px;

    color: #2875df;
}

.property-card-icon i {

    font-size: 21px;

    color: #2875df;
}


/* =========================================================
   CARD TEXT
========================================================= */

.property-card-text {

    color: #3d3d3d;

    font-size: 16px;

    line-height: 1.25;

    font-weight: 400;
}


/* =========================================================
   DOCUMENT LIST
========================================================= */

.property-document-list {

    display: flex;

    flex-direction: column;

    gap: 24px;
}


/* =========================================================
   DOCUMENT CARD
========================================================= */

.property-document-card {

    width: 100%;

    min-height: 74px;

    display: flex;

    align-items: center;

    gap: 24px;

    padding: 14px 24px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #4d7ff0;

    border-radius: 14px;

    box-shadow:
        0 6px 18px rgba(40,117,223,0.10);

    color: #3d3d3d;

    font-size: 16px;

    line-height: 1.25;

    font-weight: 400;
}


/* =========================================================
   DOCUMENT ICON
========================================================= */

.property-document-icon {

    width: 42px;

    height: 42px;

    min-width: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e5efff;

    border-radius: 5px;
}

.property-document-icon i {

    color: #2875df;

    font-size: 19px;
}


/* =========================================================
   CARD HOVER
========================================================= */

.property-criteria-card,
.property-document-card {

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.property-criteria-card:hover,
.property-document-card:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 24px rgba(40,117,223,0.15);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .property-eligibility-section {

        padding: 25px 20px 55px;
    }


    .property-eligibility-tabs {

        grid-template-columns: repeat(3, 1fr);

        row-gap: 4px;

        margin-bottom: 35px;
    }


    .property-eligibility-grid {

        grid-template-columns: 1fr;

        gap: 35px;
    }


    .property-eligibility-tab {

        font-size: 14px;

        min-height: 58px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .property-eligibility-section {

        padding: 22px 12px 45px !important;
    }


    .property-eligibility-container {

        width: 100% !important;
    }


    /* =====================================================
       TABS
    ===================================================== */

    .property-eligibility-tabs {

        display: flex !important;

        width: 100% !important;

        overflow-x: auto !important;

        overflow-y: hidden !important;

        gap: 5px !important;

        padding: 4px !important;

        margin-bottom: 30px !important;

        border-radius: 9px !important;

        scrollbar-width: none;
    }

    .property-eligibility-tabs::-webkit-scrollbar {
        display: none;
    }


    .property-eligibility-tab {

        flex: 0 0 145px !important;

        width: 145px !important;

        min-width: 145px !important;

        min-height: 58px !important;

        padding: 7px 8px !important;

        font-size: 13px !important;

        line-height: 1.15 !important;

        border-radius: 7px !important;

        white-space: normal !important;
    }


    /* =====================================================
       CONTENT
    ===================================================== */

    .property-eligibility-grid {

        display: flex !important;

        flex-direction: column !important;

        gap: 30px !important;

        width: 100% !important;
    }


    .property-eligibility-column {

        width: 100% !important;
    }


    /* =====================================================
       TITLES
    ===================================================== */

    .property-column-title {

        margin-bottom: 15px !important;

        font-size: 18px !important;

        line-height: 1.3 !important;
    }


    /* =====================================================
       CARDS
    ===================================================== */

    .property-criteria-list,
    .property-document-list {

        gap: 14px !important;
    }


    .property-criteria-card,
    .property-document-card {

        width: 100% !important;

        min-height: 64px !important;

        padding: 12px !important;

        gap: 12px !important;

        border-radius: 11px !important;
    }


    /* =====================================================
       ICON
    ===================================================== */

    .property-card-icon,
    .property-document-icon {

        width: 40px !important;

        height: 40px !important;

        min-width: 40px !important;
    }


    .property-card-icon i {

        font-size: 19px !important;
    }


    .property-document-icon i {

        font-size: 17px !important;
    }


    /* =====================================================
       TEXT
    ===================================================== */

    .property-card-text,
    .property-document-card {

        font-size: 14px !important;

        line-height: 1.35 !important;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .property-eligibility-section {

        padding-left: 10px !important;

        padding-right: 10px !important;
    }


    .property-eligibility-tab {

        flex-basis: 135px !important;

        width: 135px !important;

        min-width: 135px !important;

        font-size: 12px !important;
    }


    .property-column-title {

        font-size: 17px !important;
    }


    .property-criteria-card,
    .property-document-card {

        padding: 11px !important;

        gap: 11px !important;
    }


    .property-card-icon,
    .property-document-icon {

        width: 38px !important;

        height: 38px !important;

        min-width: 38px !important;
    }


    .property-card-text,
    .property-document-card {

        font-size: 13px !important;

        line-height: 1.35 !important;
    }

}




/* =========================================================
   PROPERTY OVERVIEW SECTION
========================================================= */

.property-overview-section {
    width: 100%;
    background: #f8fafc;
    padding: 35px 20px 55px;
    overflow: hidden;
}


/* MAIN CONTAINER */

.property-overview-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.property-overview-heading {
    text-align: center;
    margin-bottom: 45px;
}

.property-overview-label {
    color: #2875df;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 8px;
}

.property-overview-heading h2 {
    margin: 0 0 8px;
    color: #333333;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 600;
}

.property-overview-heading p {
    margin: 0;
    color: #727272;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 400;
}


/* =========================================================
   MAIN 3 COLUMN AREA
========================================================= */

.property-overview-content {
    display: grid;
    grid-template-columns: 1fr 340px 1fr;
    align-items: center;
    column-gap: 25px;
}


/* =========================================================
   FEATURES
========================================================= */

.property-features {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 350px;
}

.property-features-left {
    align-items: flex-start;
}

.property-features-right {
    align-items: flex-start;
}


/* FEATURE */

.property-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 65px;
}


/* =========================================================
   ICON BOX
========================================================= */

.property-feature-icon {
    width: 41px;
    height: 41px;
    min-width: 41px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #e5efff;
    border-radius: 6px;

    color: #2875df;

    font-size: 19px;
}


/* ICON */

.property-feature-icon i {
    color: #2875df;
}


/* =========================================================
   FEATURE TEXT
========================================================= */

.property-feature-text {
    color: #252525;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 500;
}


/* =========================================================
   CENTER IMAGE
========================================================= */

.property-overview-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/* IMAGE WRAPPER */

.property-image-wrapper {
    width: 330px;
    height: 250px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* IMAGE */

.property-main-image {
    width: 100%;
    max-width: 330px;
    height: auto;
    object-fit: contain;
    display: block;
}


/* =========================================================
   APPLY BUTTON
========================================================= */

.property-apply-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 168px;
    height: 50px;

    background: #2875df;
    color: #ffffff;

    border-radius: 8px;

    text-decoration: none;

    font-size: 15px;
    font-weight: 600;

    margin-top: 5px;

    transition: all 0.3s ease;
}

.property-apply-btn:hover {
    background: #1f64c5;
    color: #ffffff;
    transform: translateY(-2px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .property-overview-section {
        padding: 35px 20px 50px;
    }

    .property-overview-content {
        grid-template-columns: 1fr 280px 1fr;
        column-gap: 12px;
    }

    .property-image-wrapper {
        width: 280px;
        height: 220px;
    }

    .property-main-image {
        max-width: 280px;
    }

    .property-feature-text {
        font-size: 13px;
    }

    .property-feature-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 17px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .property-overview-section {
        padding: 35px 15px 45px;
    }

    .property-overview-heading {
        margin-bottom: 25px;
    }

    .property-overview-label {
        font-size: 14px;
    }

    .property-overview-heading h2 {
        font-size: 22px;
    }

    .property-overview-heading p {
        font-size: 14px;
        line-height: 1.5;
    }

    .desktop-break {
        display: none;
    }


    /* STACK EVERYTHING */

    .property-overview-content {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }


    /* CENTER IMAGE FIRST */

    .property-overview-center {
        order: 1;
        width: 100%;
    }


    .property-features-left {
        order: 2;
    }

    .property-features-right {
        order: 3;
    }


    /* FEATURES */

    .property-features {
        width: 100%;
        height: auto;
        gap: 15px;
    }


    .property-feature {
        width: 100%;
        min-height: auto;
        gap: 12px;
    }


    .property-feature-text {
        font-size: 14px;
    }


    /* IMAGE */

    .property-image-wrapper {
        width: 100%;
        max-width: 320px;
        height: 220px;
    }

    .property-main-image {
        width: 100%;
        max-width: 320px;
    }


    /* BUTTON */

    .property-apply-btn {
        margin-bottom: 15px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .property-overview-heading h2 {
        font-size: 20px;
    }

    .property-overview-heading p {
        font-size: 13px;
    }

    .property-image-wrapper {
        max-width: 290px;
        height: 200px;
    }

    .property-main-image {
        max-width: 290px;
    }

}



/* =========================================================
   MAIN SECTION
========================================================= */

.home-loan-emi-section {

    width: 100%;

    background: #edf4fd;

    padding: 45px 25px 60px;

    box-sizing: border-box;

    overflow: hidden;
}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.home-loan-emi-wrapper {

    width: 100%;

    max-width: 1120px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 70px;

    box-sizing: border-box;
}


/* =========================================================
   LEFT SIDE
========================================================= */

.home-loan-emi-left {

    flex: 1;

    min-width: 0;
}


.home-loan-emi-left h2 {

    margin: 0 0 12px;

    color: #333333;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 34px;

    font-weight: 600;

    line-height: 1.15;

    letter-spacing: -0.5px;
}


.home-loan-emi-left p {

    margin: 0 0 22px;

    color: #707070;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    line-height: 1.4;
}


/* =========================================================
   BUTTON
========================================================= */

.home-loan-emi-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    min-width: 215px;

    height: 48px;

    padding: 0 22px;

    background: #2878e5;

    color: #ffffff !important;

    border-radius: 7px;

    text-decoration: none !important;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    font-weight: 600;

    box-sizing: border-box;

    transition:
        all .25s ease;
}


.home-loan-emi-btn:hover {

    background: #1d66cc;

    color: #ffffff !important;

    transform: translateY(-1px);

    box-shadow:
        0 5px 14px rgba(40,120,229,.20);
}


.home-loan-emi-btn span {

    font-size: 23px;

    line-height: 1;
}


/* =========================================================
   RIGHT EMI CARD - LARGE
========================================================= */

.home-loan-emi-box {

    flex: 0 0 560px;

    width: 560px;

    min-height: 275px;

    padding: 36px 34px 30px;

    box-sizing: border-box;

    border-radius: 17px;

    background:
        linear-gradient(
            115deg,
            #2878e5 0%,
            #493ddd 48%,
            #b500d9 100%
        );

    color: #ffffff;

    box-shadow:
        0 7px 20px rgba(41,92,171,.13);
}


/* =========================================================
   CARD TITLE
========================================================= */

.emi-box-title {

    margin-bottom: 32px;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;

    font-weight: 400;
}


/* =========================================================
   MAIN EMI
========================================================= */

.emi-amount {

    margin-bottom: 12px;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 38px;

    font-weight: 700;

    line-height: 1;
}


.emi-amount span {

    margin-left: 3px;

    font-size: 18px;

    font-weight: 400;
}


/* =========================================================
   LOAN DETAILS
========================================================= */

.emi-info {

    margin-bottom: 34px;

    color: rgba(255,255,255,.92);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    line-height: 1.4;
}


/* =========================================================
   BOTTOM VALUES
========================================================= */

.emi-bottom {

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 25px;
}


.emi-value {

    display: flex;

    flex-direction: column;

    min-width: 0;
}


.emi-value strong {

    margin-bottom: 6px;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 24px;

    font-weight: 700;

    line-height: 1;
}


.emi-value small {

    color: rgba(255,255,255,.90);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    line-height: 1.2;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .home-loan-emi-wrapper {

        max-width: 1120px;

        gap: 75px;
    }


    .home-loan-emi-box {

        flex-basis: 580px;

        width: 580px;

        min-height: 285px;

        padding:
            38px
            36px
            32px;
    }


    .home-loan-emi-left h2 {

        font-size: 35px;
    }

}


/* =========================================================
   DESKTOP 992 - 1199
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .home-loan-emi-wrapper {

        max-width: 1000px;

        gap: 45px;
    }


    .home-loan-emi-box {

        flex-basis: 520px;

        width: 520px;

        min-height: 265px;

        padding:
            32px
            30px
            28px;
    }


    .home-loan-emi-left h2 {

        font-size: 31px;
    }


    .emi-amount {

        font-size: 35px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .home-loan-emi-section {

        padding:
            40px
            25px
            55px;
    }


    .home-loan-emi-wrapper {

        gap: 30px;

        max-width: 900px;
    }


    .home-loan-emi-left h2 {

        font-size: 28px;
    }


    .home-loan-emi-left p {

        font-size: 13px;
    }


    .home-loan-emi-box {

        flex-basis: 450px;

        width: 450px;

        min-height: 250px;

        padding:
            29px
            25px
            26px;
    }


    .emi-box-title {

        font-size: 13px;

        margin-bottom: 27px;
    }


    .emi-amount {

        font-size: 30px;
    }


    .emi-amount span {

        font-size: 15px;
    }


    .emi-info {

        font-size: 10px;

        margin-bottom: 28px;
    }


    .emi-bottom {

        gap: 12px;
    }


    .emi-value strong {

        font-size: 19px;
    }


    .emi-value small {

        font-size: 10px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .home-loan-emi-section {

        padding:
            38px
            15px
            48px;
    }


    .home-loan-emi-wrapper {

        flex-direction: column;

        align-items: stretch;

        gap: 30px;
    }


    .home-loan-emi-left {

        width: 100%;

        text-align: center;
    }


    .home-loan-emi-left h2 {

        font-size: 27px;

        line-height: 1.2;

        letter-spacing: 0;
    }


    .home-loan-emi-left p {

        font-size: 13px;

        line-height: 1.45;
    }


    .home-loan-emi-btn {

        min-width: 205px;

        height: 46px;

        font-size: 13px;
    }


    /* LARGE CARD ON MOBILE */

    .home-loan-emi-box {

        width: 100%;

        min-width: 0;

        flex: none;

        min-height: 260px;

        padding:
            29px
            23px
            27px;

        border-radius: 15px;
    }


    .emi-box-title {

        font-size: 13px;

        margin-bottom: 27px;
    }


    .emi-amount {

        font-size: 30px;
    }


    .emi-amount span {

        font-size: 15px;
    }


    .emi-info {

        font-size: 10px;

        margin-bottom: 29px;
    }


    .emi-bottom {

        gap: 10px;
    }


    .emi-value strong {

        font-size: 18px;
    }


    .emi-value small {

        font-size: 10px;
    }

}


/* =========================================================
   IPHONE 376 - 575
========================================================= */

@media (min-width: 376px) and (max-width: 575px) {

    .home-loan-emi-section {

        padding:
            35px
            14px
            45px;
    }


    .home-loan-emi-wrapper {

        gap: 28px;
    }


    .home-loan-emi-left h2 {

        font-size: 25px;
    }


    .home-loan-emi-left p {

        font-size: 12px;
    }


    .home-loan-emi-box {

        min-height: 255px;

        padding:
            27px
            19px
            25px;
    }


    .emi-box-title {

        font-size: 12px;

        margin-bottom: 24px;
    }


    .emi-amount {

        font-size: 27px;
    }


    .emi-amount span {

        font-size: 14px;
    }


    .emi-info {

        font-size: 9px;

        margin-bottom: 26px;

        white-space: nowrap;
    }


    .emi-bottom {

        gap: 7px;
    }


    .emi-value strong {

        font-size: 17px;
    }


    .emi-value small {

        font-size: 9px;
    }

}


/* =========================================================
   IPHONE SE / SMALL MOBILE
========================================================= */

@media (max-width: 375px) {

    .home-loan-emi-section {

        padding:
            32px
            11px
            42px;
    }


    .home-loan-emi-wrapper {

        gap: 25px;
    }


    .home-loan-emi-left h2 {

        font-size: 23px;
    }


    .home-loan-emi-left p {

        font-size: 11px;

        line-height: 1.45;
    }


    .home-loan-emi-btn {

        min-width: 195px;

        height: 44px;

        font-size: 12px;
    }


    .home-loan-emi-box {

        min-height: 245px;

        padding:
            24px
            15px
            22px;

        border-radius: 13px;
    }


    .emi-box-title {

        font-size: 10px;

        margin-bottom: 21px;
    }


    .emi-amount {

        font-size: 23px;
    }


    .emi-amount span {

        font-size: 12px;
    }


    .emi-info {

        font-size: 8px;

        margin-bottom: 23px;

        white-space: nowrap;
    }


    .emi-bottom {

        gap: 4px;
    }


    .emi-value strong {

        font-size: 14px;
    }


    .emi-value small {

        font-size: 8px;
    }

}
/* 2nd design css */
/* =========================================
   OVERDRAFT FACILITY SECTION
========================================= */

.overdraft-section {
    width: 100%;
    background: #ffffff;
    padding: 65px 20px 80px;
    font-family: Arial, Helvetica, sans-serif;
}

.overdraft-section .container {
    max-width: 1050px;
    margin: 0 auto;
}


/* =========================================
   HEADING
========================================= */

.overdraft-heading {
    text-align: center;
    margin-bottom: 68px;
}

.overdraft-heading h2 {
    margin: 0;
    font-size: 23px;
    line-height: 1.35;
    font-weight: 500;
    color: #333333;
}

.overdraft-heading span {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 400;
    color: #2875e5;
}

.overdraft-heading p {
    max-width: 930px;
    margin: 7px auto 0;
    font-size: 14px;
    line-height: 1.35;
    color: #6c6c6c;
}


/* =========================================
   MAIN CONTENT
========================================= */

.overdraft-content {
    display: grid;
    grid-template-columns: 1fr 300px 1fr;
    align-items: center;
    column-gap: 35px;
}


/* =========================================
   FEATURES
========================================= */

.overdraft-features {
    display: flex;
    flex-direction: column;
    gap: 68px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.feature-icon {
    flex: 0 0 39px;
    width: 39px;
    height: 39px;
    background: #e8f1ff;
    border-radius: 4px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-icon i {
    color: #2875e5;
    font-size: 19px;
}

.feature-text {
    padding-top: 3px;
    color: #2f2f2f;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 400;
}


/* =========================================
   CENTER
========================================= */

.overdraft-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.overdraft-image {
    width: 230px;
    height: 220px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.overdraft-image img {
    width: 100%;
    max-width: 230px;
    height: auto;
    display: block;
    object-fit: contain;
}


/* =========================================
   BUTTON
========================================= */

.overdraft-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 156px;
    height: 47px;

    margin-top: 18px;

    background: #2875e5;
    color: #ffffff;

    text-decoration: none;

    border-radius: 8px;

    font-size: 14px;
    font-weight: 500;

    transition: all 0.3s ease;
}

.overdraft-btn:hover {
    background: #1762d0;
    color: #ffffff;
    transform: translateY(-2px);
}


/* =========================================
   BOOTSTRAP ICONS
========================================= */

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .overdraft-section {
        padding: 55px 20px 65px;
    }

    .overdraft-content {
        grid-template-columns: 1fr 240px 1fr;
        column-gap: 20px;
    }

    .overdraft-features {
        gap: 50px;
    }

    .feature-text {
        font-size: 13px;
    }

    .overdraft-image {
        width: 200px;
        height: 200px;
    }

    .overdraft-heading {
        margin-bottom: 50px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .overdraft-section {
        padding: 45px 18px 55px;
    }

    .overdraft-heading {
        margin-bottom: 35px;
    }

    .overdraft-heading h2 {
        font-size: 21px;
    }

    .overdraft-heading span {
        font-size: 13px;
        margin-top: 7px;
    }

    .overdraft-heading p {
        font-size: 13px;
        line-height: 1.5;
        margin-top: 10px;
    }

    .overdraft-content {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    /* Center image first */
    .overdraft-center {
        order: 1;
    }

    /* Left features */
    .left-features {
        order: 2;
    }

    /* Right features */
    .right-features {
        order: 3;
    }

    .overdraft-features {
        width: 100%;
        gap: 25px;
    }

    .feature-item {
        width: 100%;
    }

    .feature-text {
        font-size: 14px;
    }

    .overdraft-image {
        width: 220px;
        height: 190px;
    }

    .overdraft-image img {
        max-width: 220px;
    }

    .overdraft-btn {
        width: 150px;
        height: 45px;
        margin-top: 10px;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .overdraft-section {
        padding: 35px 15px 45px;
    }

    .overdraft-heading h2 {
        font-size: 19px;
    }

    .overdraft-heading p {
        font-size: 12px;
    }

    .feature-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .feature-icon i {
        font-size: 17px;
    }

    .feature-text {
        font-size: 13px;
    }

    .overdraft-image {
        width: 190px;
        height: 170px;
    }

    .overdraft-image img {
        max-width: 190px;
    }
}

/* 3rd section */
/* =========================================
   WHY CHOOSE OVERDRAFT
========================================= */

.why-overdraft-section {
    width: 100%;
    background: #ffffff;
    padding: 28px 20px 38px;
    font-family: Arial, Helvetica, sans-serif;
}

.why-overdraft-container {
    max-width: 1200px;
    margin: 0 auto;
}


/* =========================================
   HEADING
========================================= */

.why-overdraft-heading {
    text-align: center;
    margin-bottom: 43px;
}

.why-overdraft-heading h2 {
    margin: 0;

    font-size: 24px;
    line-height: 1.3;
    font-weight: 600;

    color: #333333;
}

.why-overdraft-subtitle {
    margin-top: 4px;

    font-size: 14px;
    line-height: 1.4;

    color: #2875e5;
}

.why-overdraft-heading p {
    max-width: 950px;

    margin: 12px auto 0;

    font-size: 14px;
    line-height: 1.25;

    color: #707070;
}


/* =========================================
   CARD GRID
========================================= */

.why-overdraft-grid {
    display: grid;

    grid-template-columns:
        repeat(6, 1fr);

    column-gap: 30px;
    row-gap: 30px;

    justify-items: stretch;
}


/* First 3 cards */

.why-overdraft-card:nth-child(1) {
    grid-column: span 2;
}

.why-overdraft-card:nth-child(2) {
    grid-column: span 2;
}

.why-overdraft-card:nth-child(3) {
    grid-column: span 2;
}


/* Bottom 2 cards */

.why-overdraft-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.why-overdraft-card:nth-child(5) {
    grid-column: 4 / span 2;
}


/* =========================================
   CARD
========================================= */

.why-overdraft-card {
    min-height: 204px;

    padding: 29px 22px;

    border: 1.5px solid #2875e5;

    border-radius: 15px;

    background: #ffffff;

    box-shadow:
        0 5px 12px rgba(40, 117, 229, 0.12);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.why-overdraft-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 8px 20px rgba(40, 117, 229, 0.18);
}


/* =========================================
   ICON
========================================= */

.why-overdraft-icon {
    width: 39px;
    height: 39px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #e7f0ff;

    border-radius: 4px;

    margin-bottom: 22px;
}

.why-overdraft-icon i {
    font-size: 19px;

    color: #2875e5;

    line-height: 1;
}


/* =========================================
   CARD TITLE
========================================= */

.why-overdraft-card h3 {
    margin: 0 0 7px;

    font-size: 21px;

    line-height: 1.25;

    font-weight: 600;

    color: #363636;
}


/* =========================================
   CARD DESCRIPTION
========================================= */

.why-overdraft-card p {
    margin: 0;

    font-size: 14px;

    line-height: 1.25;

    color: #707070;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .why-overdraft-section {
        padding: 35px 20px 50px;
    }

    .why-overdraft-heading h2 {
        font-size: 22px;
    }

    .why-overdraft-heading p {
        font-size: 13px;
    }

    .why-overdraft-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .why-overdraft-card:nth-child(1),
    .why-overdraft-card:nth-child(2),
    .why-overdraft-card:nth-child(3),
    .why-overdraft-card:nth-child(4),
    .why-overdraft-card:nth-child(5) {
        grid-column: auto;
    }

    .why-overdraft-card {
        min-height: 200px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .why-overdraft-section {
        padding: 35px 15px 45px;
    }

    .why-overdraft-heading {
        margin-bottom: 30px;
    }

    .why-overdraft-heading h2 {
        font-size: 20px;
    }

    .why-overdraft-subtitle {
        font-size: 13px;
    }

    .why-overdraft-heading p {
        font-size: 13px;
        line-height: 1.45;
    }

    .why-overdraft-grid {
        display: grid;

        grid-template-columns: 1fr;

        gap: 20px;
    }

    .why-overdraft-card:nth-child(1),
    .why-overdraft-card:nth-child(2),
    .why-overdraft-card:nth-child(3),
    .why-overdraft-card:nth-child(4),
    .why-overdraft-card:nth-child(5) {
        grid-column: auto;
    }

    .why-overdraft-card {
        min-height: auto;

        padding: 23px 20px;

        border-radius: 13px;
    }

    .why-overdraft-icon {
        margin-bottom: 17px;
    }

    .why-overdraft-card h3 {
        font-size: 19px;
    }

    .why-overdraft-card p {
        font-size: 13px;
    }

    .desktop-break {
        display: none;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .why-overdraft-heading h2 {
        font-size: 19px;
    }

    .why-overdraft-heading p {
        font-size: 12px;
    }

    .why-overdraft-card h3 {
        font-size: 18px;
    }

    .why-overdraft-card p {
        font-size: 12px;
    }
}

/* 4rth section */

/* =========================================
   PROPERTY LOAN BENEFITS
========================================= */

.loan-benefits-section {
    width: 100%;
    background: #ffffff;
    padding: 28px 20px 85px;
    font-family: Arial, Helvetica, sans-serif;
}

.loan-benefits-container {
    max-width: 1190px;
    margin: 0 auto;
}


/* =========================================
   HEADING
========================================= */

.loan-benefits-heading {
    text-align: center;
    margin-bottom: 43px;
}

.loan-benefits-heading h2 {
    margin: 0;

    color: #333333;

    font-size: 24px;
    line-height: 1.3;

    font-weight: 600;
}

.loan-benefits-heading p {
    margin: 5px 0 0;

    color: #666666;

    font-size: 14px;
    line-height: 1.4;
}


/* =========================================
   GRID
========================================= */

.loan-benefits-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    column-gap: 30px;
    row-gap: 45px;
}


/* =========================================
   CARD
========================================= */

.loan-benefit-card {
    min-height: 188px;

    padding: 29px 22px 24px;

    background: #ffffff;

    border: 1.5px solid #2875e5;

    border-radius: 15px;

    box-sizing: border-box;

    box-shadow:
        0 5px 14px rgba(40, 117, 229, 0.10);

    transition: all 0.3s ease;
}

.loan-benefit-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 8px 20px rgba(40, 117, 229, 0.17);
}


/* =========================================
   ICON BOX
========================================= */

.loan-benefit-icon {
    width: 39px;
    height: 39px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #e5efff;

    border-radius: 4px;

    margin-bottom: 22px;
}

.loan-benefit-icon i {
    color: #2875e5;

    font-size: 19px;

    line-height: 1;
}


/* =========================================
   CARD TITLE
========================================= */

.loan-benefit-card h3 {
    margin: 0 0 7px;

    color: #333333;

    font-size: 21px;

    line-height: 1.25;

    font-weight: 600;
}


/* =========================================
   CARD DESCRIPTION
========================================= */

.loan-benefit-card p {
    margin: 0;

    color: #555555;

    font-size: 14px;

    line-height: 1.3;

    font-weight: 400;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .loan-benefits-section {
        padding: 35px 20px 60px;
    }

    .loan-benefits-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 25px;
    }

    .loan-benefit-card {
        min-height: 190px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .loan-benefits-section {
        padding: 35px 15px 50px;
    }

    .loan-benefits-heading {
        margin-bottom: 30px;
    }

    .loan-benefits-heading h2 {
        font-size: 21px;
    }

    .loan-benefits-heading p {
        font-size: 13px;
    }

    .loan-benefits-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .loan-benefit-card {
        min-height: auto;

        padding: 23px 20px;

        border-radius: 13px;
    }

    .loan-benefit-icon {
        margin-bottom: 18px;
    }

    .loan-benefit-card h3 {
        font-size: 19px;
    }

    .loan-benefit-card p {
        font-size: 13px;
        line-height: 1.4;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .loan-benefits-heading h2 {
        font-size: 19px;
    }

    .loan-benefits-heading p {
        font-size: 12px;
    }

    .loan-benefit-card h3 {
        font-size: 18px;
    }

    .loan-benefit-card p {
        font-size: 12px;
    }
}

/* 5th secton */

/* =========================================
   ELIGIBILITY & DOCUMENTS
========================================= */

#home-eligibility {
    width: 100%;
    background: #fff;
    padding: 10px 0 55px;
}

#home-eligibility .container-tab {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
}


/* =========================================
   TABS
========================================= */

#home-eligibility .home-tabs {
    width: 80%;
    margin: 0 auto 44px;

    display: grid;
    grid-template-columns: repeat(5, 1fr);

    background: #edf4fc;

    border: 1px solid #2490ff;

    padding: 3px;

    min-height: 64px;
}


#home-eligibility .home-tab {
    border: none;
    outline: none;

    background: transparent;

    color: #303030;

    font-size: 14px;
    font-weight: 400;

    line-height: 1.2;

    padding: 10px 12px;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-direction: column;

    transition: all 0.25s ease;
}


#home-eligibility .home-tab span {
    display: block;
}


#home-eligibility .home-tab.active {
    background: #2875df;

    color: #fff;

    border-radius: 7px;

    font-weight: 500;
}


#home-eligibility .home-tab:hover:not(.active) {
    color: #2875df;
}


/* =========================================
   TAB CONTENT
========================================= */

#home-eligibility .home-tab-content {
    display: none;
}

#home-eligibility .home-tab-content.active {
    display: block;
}


/* =========================================
   TWO COLUMN LAYOUT
========================================= */

#home-eligibility .home-eligibility-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    column-gap: 45px;

    align-items: start;
}


/* =========================================
   SECTION HEADINGS
========================================= */

#home-eligibility .home-eligibility-section h3,
#home-eligibility .home-documents-section h3 {

    margin: 0 0 20px;

    font-size: 18px;

    line-height: 1.2;

    font-weight: 400;

    color: #333;
}


/* =========================================
   LIST RESET
========================================= */

#home-eligibility .home-checklist,
#home-eligibility .home-document-list {

    list-style: none;

    padding: 0;
    margin: 0;

    display: flex;

    flex-direction: column;

    gap: 22px;
}


/* =========================================
   ELIGIBILITY CARD
========================================= */

#home-eligibility .home-checklist-item {

    min-height: 68px;

    box-sizing: border-box;

    padding: 12px 15px;

    display: flex;

    align-items: center;

    gap: 20px;

    background: #fff;

    border: 1.5px solid #2875e5;

    border-radius: 12px;

    box-shadow: 0 5px 12px rgba(40, 117, 229, 0.12);

    color: #333;

    font-size: 15px;

    line-height: 1.35;
}


/* =========================================
   CHECK ICON
========================================= */

#home-eligibility .home-checklist-icon {

    width: 38px;
    height: 38px;

    min-width: 38px;

    background: #e6f0ff;

    border-radius: 4px;

    display: flex;

    align-items: center;

    justify-content: center;
}


#home-eligibility .home-checklist-icon i {

    font-size: 21px;

    color: #2875e5;

    line-height: 1;
}


/* =========================================
   DOCUMENT CARD
========================================= */

#home-eligibility .home-document-item {

    min-height: 68px;

    box-sizing: border-box;

    padding: 12px 15px;

    display: flex;

    align-items: center;

    gap: 20px;

    background: #fff;

    border: 1.5px solid #2875e5;

    border-radius: 12px;

    box-shadow: 0 5px 12px rgba(40, 117, 229, 0.12);

    color: #333;

    font-size: 15px;

    line-height: 1.35;
}


/* =========================================
   DOCUMENT ICON
========================================= */

#home-eligibility .home-document-icon {

    width: 38px;
    height: 38px;

    min-width: 38px;

    background: #e6f0ff;

    border-radius: 4px;

    display: flex;

    align-items: center;

    justify-content: center;
}


#home-eligibility .home-document-icon i {

    font-size: 19px;

    color: #2875e5;

    line-height: 1;
}


/* =========================================
   HOVER
========================================= */

#home-eligibility .home-checklist-item,
#home-eligibility .home-document-item {

    transition: all 0.25s ease;
}


#home-eligibility .home-checklist-item:hover,
#home-eligibility .home-document-item:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 18px rgba(40, 117, 229, 0.16);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    #home-eligibility .container-tab {
        padding: 0 20px;
    }

    #home-eligibility .home-tabs {
        width: 100%;
    }

    #home-eligibility .home-eligibility-grid {
        column-gap: 25px;
    }

    #home-eligibility .home-checklist-item,
    #home-eligibility .home-document-item {
        font-size: 14px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    #home-eligibility {
        padding: 10px 0 45px;
    }

    #home-eligibility .container-tab {
        padding: 0 15px;
    }


    /* Tabs become horizontally scrollable */

    #home-eligibility .home-tabs {

        width: 100%;

        display: flex;

        overflow-x: auto;

        margin-bottom: 30px;

        scrollbar-width: none;

        min-height: 58px;
    }

    #home-eligibility .home-tabs::-webkit-scrollbar {
        display: none;
    }


    #home-eligibility .home-tab {

        min-width: 145px;

        flex-shrink: 0;

        font-size: 13px;

        padding: 9px 10px;
    }


    /* One column */

    #home-eligibility .home-eligibility-grid {

        grid-template-columns: 1fr;

        gap: 30px;
    }


    #home-eligibility .home-eligibility-section h3,
    #home-eligibility .home-documents-section h3 {

        font-size: 17px;

        margin-bottom: 15px;
    }


    #home-eligibility .home-checklist,
    #home-eligibility .home-document-list {

        gap: 16px;
    }


    #home-eligibility .home-checklist-item,
    #home-eligibility .home-document-item {

        min-height: 64px;

        padding: 11px 12px;

        gap: 14px;

        font-size: 13px;

        border-radius: 10px;
    }


    #home-eligibility .home-checklist-icon,
    #home-eligibility .home-document-icon {

        width: 36px;

        min-width: 36px;

        height: 36px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    #home-eligibility .home-tab {
        min-width: 130px;

        font-size: 12px;
    }

    #home-eligibility .home-checklist-item,
    #home-eligibility .home-document-item {

        font-size: 12.5px;

        line-height: 1.35;
    }

}

/* emi */


/* =========================================================
   MAIN SECTION
========================================================= */

.home-loan-emi-section {

    width: 100%;

    background: #edf4fd;

    padding: 45px 25px 60px;

    box-sizing: border-box;

    overflow: hidden;
}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.home-loan-emi-wrapper {

    width: 100%;

    max-width: 1120px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 70px;

    box-sizing: border-box;
}


/* =========================================================
   LEFT SIDE
========================================================= */

.home-loan-emi-left {

    flex: 1;

    min-width: 0;
}


.home-loan-emi-left h2 {

    margin: 0 0 12px;

    color: #333333;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 34px;

    font-weight: 600;

    line-height: 1.15;

    letter-spacing: -0.5px;
}


.home-loan-emi-left p {

    margin: 0 0 22px;

    color: #707070;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    line-height: 1.4;
}


/* =========================================================
   BUTTON
========================================================= */

.home-loan-emi-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    min-width: 215px;

    height: 48px;

    padding: 0 22px;

    background: #2878e5;

    color: #ffffff !important;

    border-radius: 7px;

    text-decoration: none !important;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    font-weight: 600;

    box-sizing: border-box;

    transition:
        all .25s ease;
}


.home-loan-emi-btn:hover {

    background: #1d66cc;

    color: #ffffff !important;

    transform: translateY(-1px);

    box-shadow:
        0 5px 14px rgba(40,120,229,.20);
}


.home-loan-emi-btn span {

    font-size: 23px;

    line-height: 1;
}


/* =========================================================
   RIGHT EMI CARD - LARGE
========================================================= */

.home-loan-emi-box {

    flex: 0 0 560px;

    width: 560px;

    min-height: 275px;

    padding: 36px 34px 30px;

    box-sizing: border-box;

    border-radius: 17px;

    background:
        linear-gradient(
            115deg,
            #2878e5 0%,
            #493ddd 48%,
            #b500d9 100%
        );

    color: #ffffff;

    box-shadow:
        0 7px 20px rgba(41,92,171,.13);
}


/* =========================================================
   CARD TITLE
========================================================= */

.emi-box-title {

    margin-bottom: 32px;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;

    font-weight: 400;
}


/* =========================================================
   MAIN EMI
========================================================= */

.emi-amount {

    margin-bottom: 12px;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 38px;

    font-weight: 700;

    line-height: 1;
}


.emi-amount span {

    margin-left: 3px;

    font-size: 18px;

    font-weight: 400;
}


/* =========================================================
   LOAN DETAILS
========================================================= */

.emi-info {

    margin-bottom: 34px;

    color: rgba(255,255,255,.92);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    line-height: 1.4;
}


/* =========================================================
   BOTTOM VALUES
========================================================= */

.emi-bottom {

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 25px;
}


.emi-value {

    display: flex;

    flex-direction: column;

    min-width: 0;
}


.emi-value strong {

    margin-bottom: 6px;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 24px;

    font-weight: 700;

    line-height: 1;
}


.emi-value small {

    color: rgba(255,255,255,.90);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    line-height: 1.2;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .home-loan-emi-wrapper {

        max-width: 1120px;

        gap: 75px;
    }


    .home-loan-emi-box {

        flex-basis: 580px;

        width: 580px;

        min-height: 285px;

        padding:
            38px
            36px
            32px;
    }


    .home-loan-emi-left h2 {

        font-size: 35px;
    }

}


/* =========================================================
   DESKTOP 992 - 1199
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .home-loan-emi-wrapper {

        max-width: 1000px;

        gap: 45px;
    }


    .home-loan-emi-box {

        flex-basis: 520px;

        width: 520px;

        min-height: 265px;

        padding:
            32px
            30px
            28px;
    }


    .home-loan-emi-left h2 {

        font-size: 31px;
    }


    .emi-amount {

        font-size: 35px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .home-loan-emi-section {

        padding:
            40px
            25px
            55px;
    }


    .home-loan-emi-wrapper {

        gap: 30px;

        max-width: 900px;
    }


    .home-loan-emi-left h2 {

        font-size: 28px;
    }


    .home-loan-emi-left p {

        font-size: 13px;
    }


    .home-loan-emi-box {

        flex-basis: 450px;

        width: 450px;

        min-height: 250px;

        padding:
            29px
            25px
            26px;
    }


    .emi-box-title {

        font-size: 13px;

        margin-bottom: 27px;
    }


    .emi-amount {

        font-size: 30px;
    }


    .emi-amount span {

        font-size: 15px;
    }


    .emi-info {

        font-size: 10px;

        margin-bottom: 28px;
    }


    .emi-bottom {

        gap: 12px;
    }


    .emi-value strong {

        font-size: 19px;
    }


    .emi-value small {

        font-size: 10px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .home-loan-emi-section {

        padding:
            38px
            15px
            48px;
    }


    .home-loan-emi-wrapper {

        flex-direction: column;

        align-items: stretch;

        gap: 30px;
    }


    .home-loan-emi-left {

        width: 100%;

        text-align: center;
    }


    .home-loan-emi-left h2 {

        font-size: 27px;

        line-height: 1.2;

        letter-spacing: 0;
    }


    .home-loan-emi-left p {

        font-size: 13px;

        line-height: 1.45;
    }


    .home-loan-emi-btn {

        min-width: 205px;

        height: 46px;

        font-size: 13px;
    }


    /* LARGE CARD ON MOBILE */

    .home-loan-emi-box {

        width: 100%;

        min-width: 0;

        flex: none;

        min-height: 260px;

        padding:
            29px
            23px
            27px;

        border-radius: 15px;
    }


    .emi-box-title {

        font-size: 13px;

        margin-bottom: 27px;
    }


    .emi-amount {

        font-size: 30px;
    }


    .emi-amount span {

        font-size: 15px;
    }


    .emi-info {

        font-size: 10px;

        margin-bottom: 29px;
    }


    .emi-bottom {

        gap: 10px;
    }


    .emi-value strong {

        font-size: 18px;
    }


    .emi-value small {

        font-size: 10px;
    }

}


/* =========================================================
   IPHONE 376 - 575
========================================================= */

@media (min-width: 376px) and (max-width: 575px) {

    .home-loan-emi-section {

        padding:
            35px
            14px
            45px;
    }


    .home-loan-emi-wrapper {

        gap: 28px;
    }


    .home-loan-emi-left h2 {

        font-size: 25px;
    }


    .home-loan-emi-left p {

        font-size: 12px;
    }


    .home-loan-emi-box {

        min-height: 255px;

        padding:
            27px
            19px
            25px;
    }


    .emi-box-title {

        font-size: 12px;

        margin-bottom: 24px;
    }


    .emi-amount {

        font-size: 27px;
    }


    .emi-amount span {

        font-size: 14px;
    }


    .emi-info {

        font-size: 9px;

        margin-bottom: 26px;

        white-space: nowrap;
    }


    .emi-bottom {

        gap: 7px;
    }


    .emi-value strong {

        font-size: 17px;
    }


    .emi-value small {

        font-size: 9px;
    }

}


/* =========================================================
   IPHONE SE / SMALL MOBILE
========================================================= */

@media (max-width: 375px) {

    .home-loan-emi-section {

        padding:
            32px
            11px
            42px;
    }


    .home-loan-emi-wrapper {

        gap: 25px;
    }


    .home-loan-emi-left h2 {

        font-size: 23px;
    }


    .home-loan-emi-left p {

        font-size: 11px;

        line-height: 1.45;
    }


    .home-loan-emi-btn {

        min-width: 195px;

        height: 44px;

        font-size: 12px;
    }


    .home-loan-emi-box {

        min-height: 245px;

        padding:
            24px
            15px
            22px;

        border-radius: 13px;
    }


    .emi-box-title {

        font-size: 10px;

        margin-bottom: 21px;
    }


    .emi-amount {

        font-size: 23px;
    }


    .emi-amount span {

        font-size: 12px;
    }


    .emi-info {

        font-size: 8px;

        margin-bottom: 23px;

        white-space: nowrap;
    }


    .emi-bottom {

        gap: 4px;
    }


    .emi-value strong {

        font-size: 14px;
    }


    .emi-value small {

        font-size: 8px;
    }

}




/* =========================================================
   DARK OVERLAY
========================================================= */

.home-loan-overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.45) 30%,
        rgba(0, 0, 0, 0.08) 65%,
        rgba(0, 0, 0, 0) 100%
    );

    z-index: 1;
}


/* =========================================================
   CONTAINER
========================================================= */

.home-loan-container {
    position: relative;
    z-index: 2;

    min-height: 525px;

    display: flex;
    align-items: center;
}


/* =========================================================
   CONTENT
========================================================= */

.home-loan-content {
    width: 50%;

    padding-left: 0;
    padding-top: 5px;
    padding-bottom: 5px;
}


/* =========================================================
   HEADING
========================================================= */

.home-loan-content h1 {
    margin: 0 0 8px 0;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 44px;
    line-height: 1.15;

    font-weight: 700;

    letter-spacing: 0;
}


.home-loan-content h1 span {
    color: #2f80ed;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.home-loan-content p {
    margin: 0 0 15px 0;

    color: rgba(255, 255, 255, 0.90);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;
    line-height: 1.5;

    font-weight: 400;
}


/* =========================================================
   APPLY NOW BUTTON
========================================================= */

.home-loan-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 86px;
    height: 35px;

    padding: 0 17px;

    background: #2878e5;

    color: #ffffff !important;

    border-radius: 4px;

    text-decoration: none !important;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;
    font-weight: 600;

    transition: all 0.3s ease;
}


.home-loan-btn:hover {
    background: #1265d2;

    color: #ffffff !important;

    transform: translateY(-1px);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.20);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .home-loan-hero {
        min-height: 525px;

        background-size: cover;

        background-position: center center;
    }


    .home-loan-container {
        min-height: 525px;
    }


    .home-loan-content {
        width: 50%;
    }


    .home-loan-content h1 {
        font-size: 44px;
    }


    .home-loan-content p {
        font-size: 15px;
    }
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .home-loan-hero {
        min-height: 450px;

        background-size: cover;

        background-position: center center;
    }


    .home-loan-container {
        min-height: 450px;
    }


    .home-loan-content {
        width: 50%;
    }


    .home-loan-content h1 {
        font-size: 36px;
    }


    .home-loan-content p {
        font-size: 14px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .home-loan-hero {

        min-height: 360px;

        /*
         * Keep the complete image visible better
         */
        background-size: 100% 100%;

        background-position: center center;

        background-repeat: no-repeat;
    }


    .home-loan-container {

        min-height: 360px;

        display: flex;

        align-items: center;

        padding-left: 30px;
        padding-right: 30px;

        box-sizing: border-box;
    }


    .home-loan-content {

        width: 52%;

        padding: 0;
    }


    .home-loan-content h1 {

        font-size: 29px;

        line-height: 1.18;

        margin-bottom: 9px;
    }


    .home-loan-content p {

        font-size: 12px;

        line-height: 1.45;

        margin-bottom: 15px;
    }


    .home-loan-btn {

        height: 35px;

        min-width: 86px;

        padding: 0 15px;

        font-size: 12px;
    }


    .home-loan-overlay {

        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.68) 0%,
            rgba(0, 0, 0, 0.43) 40%,
            rgba(0, 0, 0, 0.10) 75%,
            rgba(0, 0, 0, 0) 100%
        );
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .home-loan-hero {

        min-height: 300px;

        /*
         * IMPORTANT:
         * Cover was cropping the family image.
         * 100% 100% keeps the whole banner visible.
         */
        background-size: 100% 100%;

        background-position: center center;

        background-repeat: no-repeat;
    }


    .home-loan-container {

        min-height: 300px;

        width: 100%;

        display: flex;

        align-items: center;

        padding-top: 30px;
        padding-bottom: 30px;
        padding-left: 22px;
        padding-right: 22px;

        box-sizing: border-box;
    }


    .home-loan-content {

        width: 58%;

        padding: 0;
    }


    .home-loan-content h1 {

        font-size: 22px;

        line-height: 1.18;

        margin: 0 0 9px 0;
    }


    .home-loan-content p {

        font-size: 11px;

        line-height: 1.5;

        margin: 0 0 15px 0;
    }


    .home-loan-btn {

        height: 34px;

        min-width: 82px;

        padding: 0 15px;

        font-size: 11px;

        border-radius: 4px;
    }


    .home-loan-overlay {

        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.50) 42%,
            rgba(0, 0, 0, 0.12) 78%,
            rgba(0, 0, 0, 0.02) 100%
        );
    }
}


/* =========================================================
   IPHONE / SMALL MOBILE
========================================================= */

@media (max-width: 575px) {

    .home-loan-hero {

        min-height: 270px;

        /*
         * Full banner image visible
         */
        background-size: 100% 100%;

        background-position: center center;

        background-repeat: no-repeat;
    }


    .home-loan-container {

        min-height: 270px;

        padding-top: 25px;
        padding-bottom: 25px;
        padding-left: 18px;
        padding-right: 18px;

        align-items: center;
    }


    .home-loan-content {

        width: 58%;

        max-width: 230px;

        padding: 0;
    }


    .home-loan-content h1 {

        font-size: 20px;

        line-height: 1.18;

        margin-bottom: 8px;
    }


    .home-loan-content p {

        font-size: 10px;

        line-height: 1.45;

        margin-bottom: 13px;
    }


    .home-loan-btn {

        height: 33px;

        min-width: 82px;

        padding: 0 14px;

        font-size: 10px;
    }


    .home-loan-overlay {

        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.70) 0%,
            rgba(0, 0, 0, 0.48) 43%,
            rgba(0, 0, 0, 0.15) 75%,
            rgba(0, 0, 0, 0.02) 100%
        );
    }
}


/* =========================================================
   IPHONE SE / 375px
========================================================= */

@media (max-width: 375px) {

    .home-loan-hero {

        min-height: 245px;

        background-size: 100% 100%;

        background-position: center center;
    }


    .home-loan-container {

        min-height: 245px;

        padding-top: 22px;
        padding-bottom: 22px;
        padding-left: 15px;
        padding-right: 15px;
    }


    .home-loan-content {

        width: 58%;

        max-width: 210px;
    }


    .home-loan-content h1 {

        font-size: 18px;

        line-height: 1.17;

        margin-bottom: 7px;
    }


    .home-loan-content p {

        font-size: 9px;

        line-height: 1.4;

        margin-bottom: 12px;
    }


    .home-loan-btn {

        height: 31px;

        min-width: 78px;

        padding: 0 12px;

        font-size: 9px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .home-loan-hero {

        min-height: 230px;

        background-size: 100% 100%;

        background-position: center center;
    }


    .home-loan-container {

        min-height: 230px;

        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 13px;
        padding-right: 13px;
    }


    .home-loan-content {

        width: 58%;

        max-width: 195px;
    }


    .home-loan-content h1 {

        font-size: 17px;

        line-height: 1.17;
    }


    .home-loan-content p {

        font-size: 8.5px;

        line-height: 1.4;
    }


    .home-loan-btn {

        height: 30px;

        min-width: 75px;

        padding: 0 11px;

        font-size: 9px;
    }
}


/* =========================================================
   EXTRA SMALL DEVICES
========================================================= */

@media (max-width: 320px) {

    .home-loan-hero {

        min-height: 215px;

        background-size: 100% 100%;
    }


    .home-loan-container {

        min-height: 215px;

        padding-left: 12px;
        padding-right: 12px;
    }


    .home-loan-content {

        width: 57%;
    }


    .home-loan-content h1 {

        font-size: 16px;
    }


    .home-loan-content p {

        font-size: 8px;
    }


    .home-loan-btn {

        height: 29px;

        min-width: 72px;

        font-size: 8px;
    }
}


/* =========================================================
   MAIN SECTION
========================================================= */

.property-loan-why {
    width: 100%;
    background: #f8fafc;
    padding: 25px 20px 60px;
    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.property-loan-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.property-loan-heading {
    text-align: center;
    margin-bottom: 48px;
}

.property-loan-heading h2 {
    margin: 0 0 4px;

    font-size: 26px;
    line-height: 1.3;

    font-weight: 600;
    color: #333333;
}


/* FIRST PARAGRAPH */

.property-loan-intro {
    margin: 0 auto 14px;

    font-size: 15px;
    line-height: 1.25;

    font-weight: 400;
}


/* BLUE TEXT */

.blue-text {
    color: #2875df;
}


/* SECOND PARAGRAPH */

.property-loan-description {
    margin: 0 auto;

    color: #777777;

    font-size: 15px;
    line-height: 1.35;

    font-weight: 400;
}


/* =========================================================
   CARDS GRID
========================================================= */

.property-loan-cards {
    display: grid;

    grid-template-columns: repeat(6, 1fr);

    column-gap: 32px;
    row-gap: 34px;

    align-items: start;
}


/* =========================================================
   CARD
========================================================= */

.property-loan-card {

    grid-column: span 2;

    min-height: 218px;

    padding: 32px 24px 25px;

    background: #ffffff;

    border: 1px solid #4d7ff0;

    border-radius: 16px;

    box-shadow: 0 8px 22px rgba(38, 102, 220, 0.12);

    box-sizing: border-box;

    transition: all 0.3s ease;
}


/* =========================================================
   BOTTOM CARDS
========================================================= */

/*
   4th card starts around 18%
   5th card starts around 50%
   This creates the centered 2-card row
*/

.property-loan-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.property-loan-card:nth-child(5) {
    grid-column: 4 / span 2;
}


/* =========================================================
   ICON BOX
========================================================= */

.property-loan-icon {

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #e6efff;

    border-radius: 5px;

    margin-bottom: 25px;
}


/* ICON */

.property-loan-icon i {

    font-size: 19px;

    color: #2875df;
}


/* =========================================================
   CARD TITLE
========================================================= */

.property-loan-card h3 {

    margin: 0 0 8px;

    color: #3b3b3b;

    font-size: 22px;

    line-height: 1.2;

    font-weight: 600;
}


/* =========================================================
   CARD DESCRIPTION
========================================================= */

.property-loan-card p {

    margin: 0;

    color: #707070;

    font-size: 15px;

    line-height: 1.25;

    font-weight: 400;
}


/* =========================================================
   HOVER
========================================================= */

.property-loan-card:hover {

    transform: translateY(-3px);

    box-shadow: 0 12px 28px rgba(38, 102, 220, 0.17);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .property-loan-cards {

        grid-template-columns: repeat(2, 1fr);

        gap: 25px;

    }

    .property-loan-card,
    .property-loan-card:nth-child(4),
    .property-loan-card:nth-child(5) {

        grid-column: auto;

    }

    .property-loan-card:last-child {

        grid-column: 1 / -1;

        max-width: calc(50% - 12px);

        margin: 0 auto;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .property-loan-why {

        padding: 30px 15px 45px;

    }


    .property-loan-heading {

        margin-bottom: 30px;

    }


    .property-loan-heading h2 {

        font-size: 23px;

    }


    .property-loan-intro {

        font-size: 14px;

        line-height: 1.45;

    }


    .property-loan-description {

        font-size: 14px;

        line-height: 1.45;

    }


    .desktop-only {

        display: none;

    }


    .property-loan-cards {

        display: flex;

        flex-direction: column;

        gap: 20px;

    }


    .property-loan-card,
    .property-loan-card:nth-child(4),
    .property-loan-card:nth-child(5) {

        width: 100%;

        max-width: 100%;

        min-height: auto;

        margin: 0;

        padding: 25px 20px;

    }


    .property-loan-card h3 {

        font-size: 20px;

    }


    .property-loan-card p {

        font-size: 14px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .property-loan-heading h2 {

        font-size: 21px;

    }


    .property-loan-card {

        border-radius: 14px;

    }


    .property-loan-card h3 {

        font-size: 19px;

    }

}

    /* =========================================================
   PROPERTY OVERVIEW - RESPONSIVE CSS
========================================================= */

.property-overview-section {
    width: 100%;
    padding: 35px 20px 55px;
    background: #f8fafc;
    overflow: hidden;
    box-sizing: border-box;
}

.property-overview-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.property-overview-heading {
    text-align: center;
    margin-bottom: 45px;
}

.property-overview-heading h4 {
    margin-bottom: 8px;
}

.property-overview-heading h2 {
    margin-bottom: 10px;
}

.property-overview-heading p {
    margin: 0 auto;
    max-width: 1100px;
    color: #777;
    font-size: 15px;
    line-height: 1.45;
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.property-overview-content {
    display: grid;
    grid-template-columns: 1fr 340px 1fr;
    align-items: center;
    gap: 25px;
}


/* =========================================================
   FEATURES
========================================================= */

.property-features {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 350px;
}

.property-feature {
    display: flex;
    align-items: center;
    gap: 12px;
}

.property-feature-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #e5efff;
    border-radius: 6px;

    color: #2875df;
}

.property-feature-icon i {
    font-size: 18px;
    color: #2875df;
}

.property-feature-text {
    color: #252525;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 500;
}


/* =========================================================
   CENTER IMAGE
========================================================= */

.property-overview-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.property-image-wrapper {
    width: 340px;
    height: 250px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.property-main-image {
    display: block;
    width: 100%;
    max-width: 340px;
    height: auto;
    object-fit: contain;
}


/* =========================================================
   APPLY BUTTON
========================================================= */

.property-apply-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 168px;
    height: 50px;

    margin-top: 5px;

    background: #2875df;
    color: #fff;

    border-radius: 8px;

    text-decoration: none;

    font-size: 15px;
    font-weight: 600;

    transition: 0.3s ease;
}

.property-apply-btn:hover {
    background: #1f64c5;
    color: #fff;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .property-overview-section {
        padding: 35px 20px 50px;
    }

    .property-overview-content {
        grid-template-columns: 1fr 280px 1fr;
        gap: 15px;
    }

    .property-features {
        height: 320px;
    }

    .property-image-wrapper {
        width: 280px;
        height: 220px;
    }

    .property-main-image {
        max-width: 280px;
    }

    .property-feature-text {
        font-size: 13px;
    }

    .property-feature-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .property-overview-heading p {
        font-size: 14px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .property-overview-section {
        padding: 30px 15px 45px;
    }

    .property-overview-container {
        width: 100%;
    }


    /* HEADING */

    .property-overview-heading {
        margin-bottom: 25px;
    }

    .property-overview-heading h4 {
        font-size: 14px;
        margin-bottom: 7px;
    }

    .property-overview-heading h2 {
        font-size: 23px;
        line-height: 1.3;
        margin-bottom: 12px;
    }

    .property-overview-heading p {
        width: 100%;
        font-size: 14px;
        line-height: 1.5;
    }


    /* REMOVE DESKTOP BR */

    .desktop-break {
        display: none;
    }


    /* =====================================================
       MOBILE CONTENT
    ===================================================== */

    .property-overview-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 20px;
    }


    /* CENTER IMAGE FIRST */

    .property-overview-center {
        order: 1;
        width: 100%;
    }


    /* LEFT FEATURES */

    .property-features-left {
        order: 2;
    }


    /* RIGHT FEATURES */

    .property-features-right {
        order: 3;
    }


    /* =====================================================
       IMAGE
    ===================================================== */

    .property-image-wrapper {
        width: 100%;
        max-width: 320px;
        height: 220px;
        margin: 0 auto;
    }

    .property-main-image {
        width: 100%;
        max-width: 320px;
        height: auto;
    }


    /* =====================================================
       BUTTON
    ===================================================== */

    .property-apply-btn {
        width: 165px;
        height: 48px;
        margin: 0 auto;
    }


    /* =====================================================
       FEATURES
    ===================================================== */

    .property-features {
        width: 100%;
        height: auto;

        display: flex;
        flex-direction: column;

        gap: 18px;
    }

    .property-feature {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .property-feature-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
    }

    .property-feature-text {
        font-size: 14px;
        line-height: 1.35;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .property-overview-section {
        padding: 25px 12px 40px;
    }

    .property-overview-heading h4 {
        font-size: 13px;
    }

    .property-overview-heading h2 {
        font-size: 20px;
    }

    .property-overview-heading p {
        font-size: 13px;
        line-height: 1.5;
    }


    .property-image-wrapper {
        max-width: 285px;
        height: 195px;
    }

    .property-main-image {
        max-width: 285px;
    }


    .property-feature {
        align-items: flex-start;
    }

    .property-feature-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .property-feature-icon i {
        font-size: 17px;
    }

    .property-feature-text {
        font-size: 13px;
        line-height: 1.4;
        padding-top: 2px;
    }


    .property-apply-btn {
        width: 155px;
        height: 46px;
        font-size: 14px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .property-overview-heading h2 {
        font-size: 19px;
    }

    .property-overview-heading p {
        font-size: 12.5px;
    }

    .property-image-wrapper {
        max-width: 260px;
        height: 180px;
    }

    .property-main-image {
        max-width: 260px;
    }

    .property-feature-text {
        font-size: 12.5px;
    }
}

/* =========================================================
   PROPERTY OVERVIEW - MOBILE FIX
========================================================= */

@media (max-width: 767px) {

    .property-overview-section {
        width: 100% !important;
        padding: 25px 15px 40px !important;
        margin: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .property-overview-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }


    /* =====================================================
       HEADING
    ===================================================== */

    .property-overview-heading {
        width: 100% !important;
        text-align: center !important;
        margin: 0 0 25px !important;
        padding: 0 !important;
    }

    .property-overview-heading h4 {
        margin: 0 0 7px !important;
        font-size: 14px !important;
        line-height: 1.3 !important;
    }

    .property-overview-heading h2 {
        margin: 0 0 12px !important;
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    .property-overview-heading p {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }

    .desktop-break {
        display: none !important;
    }


    /* =====================================================
       MAIN CONTENT
    ===================================================== */

    .property-overview-content {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }


    /* =====================================================
       CENTER IMAGE SECTION
    ===================================================== */

    .property-overview-center {
        order: 1 !important;

        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* IMAGE BOX */

    .property-image-wrapper {
        width: 100% !important;
        max-width: 300px !important;

        height: 210px !important;
        min-height: 210px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        overflow: hidden !important;
        box-sizing: border-box !important;
    }


    /* ACTUAL IMAGE */

    .property-main-image {
        display: block !important;

        width: auto !important;
        max-width: 100% !important;

        height: 205px !important;
        max-height: 205px !important;

        object-fit: contain !important;

        margin: 0 auto !important;
        padding: 0 !important;
    }


    /* =====================================================
       APPLY BUTTON
    ===================================================== */

    .property-apply-btn {
        order: 2 !important;

        width: 210px !important;
        max-width: 210px !important;

        height: 48px !important;
        min-height: 48px !important;

        margin: 5px auto 28px !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: #2875df !important;
        color: #ffffff !important;

        border-radius: 8px !important;

        font-size: 16px !important;
        line-height: 1 !important;
        font-weight: 600 !important;

        text-decoration: none !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       LEFT + RIGHT FEATURES
    ===================================================== */

    .property-features {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 16px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .property-features-left {
        order: 3 !important;
    }

    .property-features-right {
        order: 4 !important;

        margin-top: 16px !important;
    }


    /* =====================================================
       EACH FEATURE
    ===================================================== */

    .property-feature {
        width: 100% !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;

        gap: 14px !important;

        margin: 0 !important;
        padding: 0 !important;

        min-height: 50px !important;
    }


    /* =====================================================
       ICON
    ===================================================== */

    .property-feature-icon {
        width: 46px !important;
        min-width: 46px !important;

        height: 46px !important;
        min-height: 46px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: #e5efff !important;

        border-radius: 7px !important;

        margin: 0 !important;
        padding: 0 !important;

        flex-shrink: 0 !important;
    }


    .property-feature-icon i {
        font-size: 19px !important;
        line-height: 1 !important;
        color: #2875df !important;
    }


    /* =====================================================
       FEATURE TEXT
    ===================================================== */

    .property-feature-text {
        width: auto !important;
        max-width: calc(100% - 60px) !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #252525 !important;

        font-size: 14px !important;
        line-height: 1.4 !important;

        font-weight: 500 !important;

        text-align: left !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
    }


    /* REMOVE FORCED DESKTOP LINE BREAKS */

    .property-feature-text br {
        display: none !important;
    }

}


/* =========================================================
   SMALL MOBILE - 480px
========================================================= */

@media (max-width: 480px) {

    .property-overview-section {
        padding: 22px 15px 35px !important;
    }


    .property-overview-heading {
        margin-bottom: 20px !important;
    }


    .property-overview-heading h4 {
        font-size: 13px !important;
    }


    .property-overview-heading h2 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }


    .property-overview-heading p {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
    }


    /* SMALLER IMAGE */

    .property-image-wrapper {
        width: 100% !important;
        max-width: 280px !important;

        height: 190px !important;
        min-height: 190px !important;
    }


    .property-main-image {
        height: 185px !important;
        max-height: 185px !important;
        max-width: 280px !important;
    }


    /* BUTTON */

    .property-apply-btn {
        width: 200px !important;
        max-width: 200px !important;

        height: 47px !important;
        min-height: 47px !important;

        margin-top: 5px !important;
        margin-bottom: 25px !important;

        font-size: 15px !important;
    }


    /* FEATURES */

    .property-features {
        gap: 14px !important;
    }


    .property-feature {
        gap: 12px !important;
        min-height: 48px !important;
    }


    .property-feature-icon {
        width: 43px !important;
        min-width: 43px !important;

        height: 43px !important;
        min-height: 43px !important;
    }


    .property-feature-icon i {
        font-size: 18px !important;
    }


    .property-feature-text {
        font-size: 13.5px !important;
        line-height: 1.4 !important;

        max-width: calc(100% - 55px) !important;
    }

}


/* =========================================================
   VERY SMALL MOBILE - 360px
========================================================= */

@media (max-width: 360px) {

    .property-overview-heading h2 {
        font-size: 19px !important;
    }


    .property-overview-heading p {
        font-size: 12px !important;
    }


    .property-image-wrapper {
        max-width: 255px !important;
        height: 175px !important;
        min-height: 175px !important;
    }


    .property-main-image {
        max-width: 255px !important;
        height: 170px !important;
        max-height: 170px !important;
    }


    .property-apply-btn {
        width: 185px !important;
        max-width: 185px !important;
    }


    .property-feature-icon {
        width: 40px !important;
        min-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;
    }


    .property-feature-text {
        font-size: 13px !important;
        max-width: calc(100% - 52px) !important;
    }

}




/* =========================================================
   MAIN SECTION
========================================================= */

.property-benefits-section {

    width: 100%;

    background: #f8fafc;

    padding: 25px 15px 70px;

    overflow: hidden;

    box-sizing: border-box;
}


/* =========================================================
   CONTAINER
========================================================= */

.property-benefits-container {

    width: 100%;

    max-width: 1250px;

    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.property-benefits-heading {

    text-align: center;

    margin-bottom: 48px;
}


.property-benefits-heading h2 {

    margin: 0 0 5px;

    color: #333333;

    font-size: 26px;

    line-height: 1.3;

    font-weight: 600;
}


.property-benefits-heading p {

    margin: 0;

    color: #707070;

    font-size: 15px;

    line-height: 1.4;

    font-weight: 400;
}


/* =========================================================
   GRID
========================================================= */

.property-benefits-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    column-gap: 32px;

    row-gap: 50px;

    width: 100%;
}


/* =========================================================
   CARD
========================================================= */

.property-benefit-card {

    width: 100%;

    min-height: 220px;

    box-sizing: border-box;

    padding: 32px 24px 25px;

    background: #ffffff;

    border: 1px solid #4d7ff0;

    border-radius: 16px;

    box-shadow: 0 7px 20px rgba(40, 117, 223, 0.10);

    transition: all 0.3s ease;
}


/* =========================================================
   ICON BOX
========================================================= */

.property-benefit-icon {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e5efff;

    border-radius: 5px;

    margin-bottom: 26px;
}


.property-benefit-icon i {

    color: #2875df;

    font-size: 19px;

    line-height: 1;
}


/* =========================================================
   CARD TITLE
========================================================= */

.property-benefit-card h3 {

    margin: 0 0 8px;

    color: #3b3b3b;

    font-size: 22px;

    line-height: 1.25;

    font-weight: 600;
}


/* =========================================================
   CARD TEXT
========================================================= */

.property-benefit-card p {

    margin: 0;

    color: #555555;

    font-size: 15px;

    line-height: 1.25;

    font-weight: 400;
}


/* =========================================================
   HOVER
========================================================= */

.property-benefit-card:hover {

    transform: translateY(-3px);

    box-shadow: 0 12px 28px rgba(40, 117, 223, 0.16);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .property-benefits-section {

        padding: 30px 20px 55px;
    }

    .property-benefits-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 25px;
    }

    .property-benefit-card {

        min-height: 220px;
    }

    .property-benefit-card h3 {

        font-size: 20px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .property-benefits-section {

        padding: 28px 15px 45px;
    }


    /* HEADING */

    .property-benefits-heading {

        margin-bottom: 30px;
    }


    .property-benefits-heading h2 {

        font-size: 22px;

        line-height: 1.3;
    }


    .property-benefits-heading p {

        font-size: 14px;
    }


    /* ONE CARD PER ROW */

    .property-benefits-grid {

        display: flex;

        flex-direction: column;

        gap: 20px;
    }


    /* CARD */

    .property-benefit-card {

        width: 100%;

        min-height: auto;

        padding: 25px 20px;

        border-radius: 14px;
    }


    /* ICON */

    .property-benefit-icon {

        width: 42px;

        height: 42px;

        margin-bottom: 22px;
    }


    /* TITLE */

    .property-benefit-card h3 {

        font-size: 20px;

        line-height: 1.3;

        margin-bottom: 8px;
    }


    /* TEXT */

    .property-benefit-card p {

        font-size: 14px;

        line-height: 1.45;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .property-benefits-section {

        padding: 25px 12px 40px;
    }


    .property-benefits-heading h2 {

        font-size: 20px;
    }


    .property-benefits-heading p {

        font-size: 13px;
    }


    .property-benefit-card {

        padding: 23px 18px;

        border-radius: 13px;
    }


    .property-benefit-icon {

        width: 40px;

        height: 40px;

        margin-bottom: 20px;
    }


    .property-benefit-icon i {

        font-size: 18px;
    }


    .property-benefit-card h3 {

        font-size: 19px;
    }


    .property-benefit-card p {

        font-size: 13.5px;

        line-height: 1.45;
    }

}





/* =========================================================
   MAIN SECTION
========================================================= */

.property-eligibility-section {
    width: 100%;
    padding: 30px 15px 70px;
    background: #f8fafc;
    box-sizing: border-box;
    overflow: hidden;
}

.property-eligibility-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
}


/* =========================================================
   TABS
========================================================= */

.property-eligibility-tabs {

    width: 100%;

    display: grid;

    grid-template-columns:
        1fr
        1fr
        1.25fr
        1.25fr
        1.2fr;

    gap: 0;

    padding: 4px;

    background: #eaf2fc;

    border-radius: 10px;

    box-sizing: border-box;

    margin-bottom: 48px;
}


/* TAB */

.property-eligibility-tab {

    border: 0;

    background: transparent;

    color: #333;

    min-height: 64px;

    padding: 8px 12px;

    border-radius: 8px;

    font-size: 15px;

    line-height: 1.15;

    font-weight: 500;

    cursor: pointer;

    transition: all 0.25s ease;

    font-family: inherit;
}


/* ACTIVE TAB */

.property-eligibility-tab.active {

    background: #2875df;

    color: #ffffff;

    box-shadow: 0 3px 8px rgba(40,117,223,0.20);
}


/* HOVER */

.property-eligibility-tab:not(.active):hover {

    background: rgba(40,117,223,0.08);

    color: #2875df;
}


/* =========================================================
   TAB CONTENT
========================================================= */

.property-eligibility-tab-content {

    display: none;

    width: 100%;
}

.property-eligibility-tab-content.active {

    display: block;
}


/* =========================================================
   TWO COLUMNS
========================================================= */

.property-eligibility-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 48px;

    align-items: start;
}


/* =========================================================
   COLUMN TITLE
========================================================= */

.property-column-title {

    margin: 0 0 20px;

    color: #333333;

    font-size: 20px;

    line-height: 1.3;

    font-weight: 500;
}


/* =========================================================
   CRITERIA LIST
========================================================= */

.property-criteria-list {

    display: flex;

    flex-direction: column;

    gap: 24px;
}


/* =========================================================
   CRITERIA CARD
========================================================= */

.property-criteria-card {

    width: 100%;

    min-height: 74px;

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 14px 16px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #4d7ff0;

    border-radius: 14px;

    box-shadow:
        0 6px 18px rgba(40,117,223,0.10);

}


/* =========================================================
   CHECK ICON
========================================================= */

.property-card-icon {

    width: 42px;

    height: 42px;

    min-width: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e5efff;

    border-radius: 5px;

    color: #2875df;
}

.property-card-icon i {

    font-size: 21px;

    color: #2875df;
}


/* =========================================================
   CARD TEXT
========================================================= */

.property-card-text {

    color: #3d3d3d;

    font-size: 16px;

    line-height: 1.25;

    font-weight: 400;
}


/* =========================================================
   DOCUMENT LIST
========================================================= */

.property-document-list {

    display: flex;

    flex-direction: column;

    gap: 24px;
}


/* =========================================================
   DOCUMENT CARD
========================================================= */

.property-document-card {

    width: 100%;

    min-height: 74px;

    display: flex;

    align-items: center;

    gap: 24px;

    padding: 14px 24px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #4d7ff0;

    border-radius: 14px;

    box-shadow:
        0 6px 18px rgba(40,117,223,0.10);

    color: #3d3d3d;

    font-size: 16px;

    line-height: 1.25;

    font-weight: 400;
}


/* =========================================================
   DOCUMENT ICON
========================================================= */

.property-document-icon {

    width: 42px;

    height: 42px;

    min-width: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e5efff;

    border-radius: 5px;
}

.property-document-icon i {

    color: #2875df;

    font-size: 19px;
}


/* =========================================================
   CARD HOVER
========================================================= */

.property-criteria-card,
.property-document-card {

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.property-criteria-card:hover,
.property-document-card:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 24px rgba(40,117,223,0.15);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .property-eligibility-section {

        padding: 25px 20px 55px;
    }


    .property-eligibility-tabs {

        grid-template-columns: repeat(3, 1fr);

        row-gap: 4px;

        margin-bottom: 35px;
    }


    .property-eligibility-grid {

        grid-template-columns: 1fr;

        gap: 35px;
    }


    .property-eligibility-tab {

        font-size: 14px;

        min-height: 58px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .property-eligibility-section {

        padding: 22px 12px 45px !important;
    }


    .property-eligibility-container {

        width: 100% !important;
    }


    /* =====================================================
       TABS
    ===================================================== */

    .property-eligibility-tabs {

        display: flex !important;

        width: 100% !important;

        overflow-x: auto !important;

        overflow-y: hidden !important;

        gap: 5px !important;

        padding: 4px !important;

        margin-bottom: 30px !important;

        border-radius: 9px !important;

        scrollbar-width: none;
    }

    .property-eligibility-tabs::-webkit-scrollbar {
        display: none;
    }


    .property-eligibility-tab {

        flex: 0 0 145px !important;

        width: 145px !important;

        min-width: 145px !important;

        min-height: 58px !important;

        padding: 7px 8px !important;

        font-size: 13px !important;

        line-height: 1.15 !important;

        border-radius: 7px !important;

        white-space: normal !important;
    }


    /* =====================================================
       CONTENT
    ===================================================== */

    .property-eligibility-grid {

        display: flex !important;

        flex-direction: column !important;

        gap: 30px !important;

        width: 100% !important;
    }


    .property-eligibility-column {

        width: 100% !important;
    }


    /* =====================================================
       TITLES
    ===================================================== */

    .property-column-title {

        margin-bottom: 15px !important;

        font-size: 18px !important;

        line-height: 1.3 !important;
    }


    /* =====================================================
       CARDS
    ===================================================== */

    .property-criteria-list,
    .property-document-list {

        gap: 14px !important;
    }


    .property-criteria-card,
    .property-document-card {

        width: 100% !important;

        min-height: 64px !important;

        padding: 12px !important;

        gap: 12px !important;

        border-radius: 11px !important;
    }


    /* =====================================================
       ICON
    ===================================================== */

    .property-card-icon,
    .property-document-icon {

        width: 40px !important;

        height: 40px !important;

        min-width: 40px !important;
    }


    .property-card-icon i {

        font-size: 19px !important;
    }


    .property-document-icon i {

        font-size: 17px !important;
    }


    /* =====================================================
       TEXT
    ===================================================== */

    .property-card-text,
    .property-document-card {

        font-size: 14px !important;

        line-height: 1.35 !important;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .property-eligibility-section {

        padding-left: 10px !important;

        padding-right: 10px !important;
    }


    .property-eligibility-tab {

        flex-basis: 135px !important;

        width: 135px !important;

        min-width: 135px !important;

        font-size: 12px !important;
    }


    .property-column-title {

        font-size: 17px !important;
    }


    .property-criteria-card,
    .property-document-card {

        padding: 11px !important;

        gap: 11px !important;
    }


    .property-card-icon,
    .property-document-icon {

        width: 38px !important;

        height: 38px !important;

        min-width: 38px !important;
    }


    .property-card-text,
    .property-document-card {

        font-size: 13px !important;

        line-height: 1.35 !important;
    }

}




/* =========================================================
   PROPERTY OVERVIEW SECTION
========================================================= */

.property-overview-section {
    width: 100%;
    background: #f8fafc;
    padding: 35px 20px 55px;
    overflow: hidden;
}


/* MAIN CONTAINER */

.property-overview-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.property-overview-heading {
    text-align: center;
    margin-bottom: 45px;
}

.property-overview-label {
    color: #2875df;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 8px;
}

.property-overview-heading h2 {
    margin: 0 0 8px;
    color: #333333;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 600;
}

.property-overview-heading p {
    margin: 0;
    color: #727272;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 400;
}


/* =========================================================
   MAIN 3 COLUMN AREA
========================================================= */

.property-overview-content {
    display: grid;
    grid-template-columns: 1fr 340px 1fr;
    align-items: center;
    column-gap: 25px;
}


/* =========================================================
   FEATURES
========================================================= */

.property-features {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 350px;
}

.property-features-left {
    align-items: flex-start;
}

.property-features-right {
    align-items: flex-start;
}


/* FEATURE */

.property-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 65px;
}


/* =========================================================
   ICON BOX
========================================================= */

.property-feature-icon {
    width: 41px;
    height: 41px;
    min-width: 41px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #e5efff;
    border-radius: 6px;

    color: #2875df;

    font-size: 19px;
}


/* ICON */

.property-feature-icon i {
    color: #2875df;
}


/* =========================================================
   FEATURE TEXT
========================================================= */

.property-feature-text {
    color: #252525;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 500;
}


/* =========================================================
   CENTER IMAGE
========================================================= */

.property-overview-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/* IMAGE WRAPPER */

.property-image-wrapper {
    width: 330px;
    height: 250px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* IMAGE */

.property-main-image {
    width: 100%;
    max-width: 330px;
    height: auto;
    object-fit: contain;
    display: block;
}


/* =========================================================
   APPLY BUTTON
========================================================= */

.property-apply-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 168px;
    height: 50px;

    background: #2875df;
    color: #ffffff;

    border-radius: 8px;

    text-decoration: none;

    font-size: 15px;
    font-weight: 600;

    margin-top: 5px;

    transition: all 0.3s ease;
}

.property-apply-btn:hover {
    background: #1f64c5;
    color: #ffffff;
    transform: translateY(-2px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .property-overview-section {
        padding: 35px 20px 50px;
    }

    .property-overview-content {
        grid-template-columns: 1fr 280px 1fr;
        column-gap: 12px;
    }

    .property-image-wrapper {
        width: 280px;
        height: 220px;
    }

    .property-main-image {
        max-width: 280px;
    }

    .property-feature-text {
        font-size: 13px;
    }

    .property-feature-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 17px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .property-overview-section {
        padding: 35px 15px 45px;
    }

    .property-overview-heading {
        margin-bottom: 25px;
    }

    .property-overview-label {
        font-size: 14px;
    }

    .property-overview-heading h2 {
        font-size: 22px;
    }

    .property-overview-heading p {
        font-size: 14px;
        line-height: 1.5;
    }

    .desktop-break {
        display: none;
    }


    /* STACK EVERYTHING */

    .property-overview-content {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }


    /* CENTER IMAGE FIRST */

    .property-overview-center {
        order: 1;
        width: 100%;
    }


    .property-features-left {
        order: 2;
    }

    .property-features-right {
        order: 3;
    }


    /* FEATURES */

    .property-features {
        width: 100%;
        height: auto;
        gap: 15px;
    }


    .property-feature {
        width: 100%;
        min-height: auto;
        gap: 12px;
    }


    .property-feature-text {
        font-size: 14px;
    }


    /* IMAGE */

    .property-image-wrapper {
        width: 100%;
        max-width: 320px;
        height: 220px;
    }

    .property-main-image {
        width: 100%;
        max-width: 320px;
    }


    /* BUTTON */

    .property-apply-btn {
        margin-bottom: 15px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .property-overview-heading h2 {
        font-size: 20px;
    }

    .property-overview-heading p {
        font-size: 13px;
    }

    .property-image-wrapper {
        max-width: 290px;
        height: 200px;
    }

    .property-main-image {
        max-width: 290px;
    }

}



/* =========================================================
   MAIN SECTION
========================================================= */

.home-loan-emi-section {

    width: 100%;

    background: #edf4fd;

    padding: 45px 25px 60px;

    box-sizing: border-box;

    overflow: hidden;
}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.home-loan-emi-wrapper {

    width: 100%;

    max-width: 1120px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 70px;

    box-sizing: border-box;
}


/* =========================================================
   LEFT SIDE
========================================================= */

.home-loan-emi-left {

    flex: 1;

    min-width: 0;
}


.home-loan-emi-left h2 {

    margin: 0 0 12px;

    color: #333333;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 34px;

    font-weight: 600;

    line-height: 1.15;

    letter-spacing: -0.5px;
}


.home-loan-emi-left p {

    margin: 0 0 22px;

    color: #707070;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    line-height: 1.4;
}


/* =========================================================
   BUTTON
========================================================= */

.home-loan-emi-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    min-width: 215px;

    height: 48px;

    padding: 0 22px;

    background: #2878e5;

    color: #ffffff !important;

    border-radius: 7px;

    text-decoration: none !important;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    font-weight: 600;

    box-sizing: border-box;

    transition:
        all .25s ease;
}


.home-loan-emi-btn:hover {

    background: #1d66cc;

    color: #ffffff !important;

    transform: translateY(-1px);

    box-shadow:
        0 5px 14px rgba(40,120,229,.20);
}


.home-loan-emi-btn span {

    font-size: 23px;

    line-height: 1;
}


/* =========================================================
   RIGHT EMI CARD - LARGE
========================================================= */

.home-loan-emi-box {

    flex: 0 0 560px;

    width: 560px;

    min-height: 275px;

    padding: 36px 34px 30px;

    box-sizing: border-box;

    border-radius: 17px;

    background:
        linear-gradient(
            115deg,
            #2878e5 0%,
            #493ddd 48%,
            #b500d9 100%
        );

    color: #ffffff;

    box-shadow:
        0 7px 20px rgba(41,92,171,.13);
}


/* =========================================================
   CARD TITLE
========================================================= */

.emi-box-title {

    margin-bottom: 32px;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;

    font-weight: 400;
}


/* =========================================================
   MAIN EMI
========================================================= */

.emi-amount {

    margin-bottom: 12px;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 38px;

    font-weight: 700;

    line-height: 1;
}


.emi-amount span {

    margin-left: 3px;

    font-size: 18px;

    font-weight: 400;
}


/* =========================================================
   LOAN DETAILS
========================================================= */

.emi-info {

    margin-bottom: 34px;

    color: rgba(255,255,255,.92);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    line-height: 1.4;
}


/* =========================================================
   BOTTOM VALUES
========================================================= */

.emi-bottom {

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 25px;
}


.emi-value {

    display: flex;

    flex-direction: column;

    min-width: 0;
}


.emi-value strong {

    margin-bottom: 6px;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 24px;

    font-weight: 700;

    line-height: 1;
}


.emi-value small {

    color: rgba(255,255,255,.90);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    line-height: 1.2;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .home-loan-emi-wrapper {

        max-width: 1120px;

        gap: 75px;
    }


    .home-loan-emi-box {

        flex-basis: 580px;

        width: 580px;

        min-height: 285px;

        padding:
            38px
            36px
            32px;
    }


    .home-loan-emi-left h2 {

        font-size: 35px;
    }

}


/* =========================================================
   DESKTOP 992 - 1199
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .home-loan-emi-wrapper {

        max-width: 1000px;

        gap: 45px;
    }


    .home-loan-emi-box {

        flex-basis: 520px;

        width: 520px;

        min-height: 265px;

        padding:
            32px
            30px
            28px;
    }


    .home-loan-emi-left h2 {

        font-size: 31px;
    }


    .emi-amount {

        font-size: 35px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .home-loan-emi-section {

        padding:
            40px
            25px
            55px;
    }


    .home-loan-emi-wrapper {

        gap: 30px;

        max-width: 900px;
    }


    .home-loan-emi-left h2 {

        font-size: 28px;
    }


    .home-loan-emi-left p {

        font-size: 13px;
    }


    .home-loan-emi-box {

        flex-basis: 450px;

        width: 450px;

        min-height: 250px;

        padding:
            29px
            25px
            26px;
    }


    .emi-box-title {

        font-size: 13px;

        margin-bottom: 27px;
    }


    .emi-amount {

        font-size: 30px;
    }


    .emi-amount span {

        font-size: 15px;
    }


    .emi-info {

        font-size: 10px;

        margin-bottom: 28px;
    }


    .emi-bottom {

        gap: 12px;
    }


    .emi-value strong {

        font-size: 19px;
    }


    .emi-value small {

        font-size: 10px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .home-loan-emi-section {

        padding:
            38px
            15px
            48px;
    }


    .home-loan-emi-wrapper {

        flex-direction: column;

        align-items: stretch;

        gap: 30px;
    }


    .home-loan-emi-left {

        width: 100%;

        text-align: center;
    }


    .home-loan-emi-left h2 {

        font-size: 27px;

        line-height: 1.2;

        letter-spacing: 0;
    }


    .home-loan-emi-left p {

        font-size: 13px;

        line-height: 1.45;
    }


    .home-loan-emi-btn {

        min-width: 205px;

        height: 46px;

        font-size: 13px;
    }


    /* LARGE CARD ON MOBILE */

    .home-loan-emi-box {

        width: 100%;

        min-width: 0;

        flex: none;

        min-height: 260px;

        padding:
            29px
            23px
            27px;

        border-radius: 15px;
    }


    .emi-box-title {

        font-size: 13px;

        margin-bottom: 27px;
    }


    .emi-amount {

        font-size: 30px;
    }


    .emi-amount span {

        font-size: 15px;
    }


    .emi-info {

        font-size: 10px;

        margin-bottom: 29px;
    }


    .emi-bottom {

        gap: 10px;
    }


    .emi-value strong {

        font-size: 18px;
    }


    .emi-value small {

        font-size: 10px;
    }

}


/* =========================================================
   IPHONE 376 - 575
========================================================= */

@media (min-width: 376px) and (max-width: 575px) {

    .home-loan-emi-section {

        padding:
            35px
            14px
            45px;
    }


    .home-loan-emi-wrapper {

        gap: 28px;
    }


    .home-loan-emi-left h2 {

        font-size: 25px;
    }


    .home-loan-emi-left p {

        font-size: 12px;
    }


    .home-loan-emi-box {

        min-height: 255px;

        padding:
            27px
            19px
            25px;
    }


    .emi-box-title {

        font-size: 12px;

        margin-bottom: 24px;
    }


    .emi-amount {

        font-size: 27px;
    }


    .emi-amount span {

        font-size: 14px;
    }


    .emi-info {

        font-size: 9px;

        margin-bottom: 26px;

        white-space: nowrap;
    }


    .emi-bottom {

        gap: 7px;
    }


    .emi-value strong {

        font-size: 17px;
    }


    .emi-value small {

        font-size: 9px;
    }

}


/* =========================================================
   IPHONE SE / SMALL MOBILE
========================================================= */

@media (max-width: 375px) {

    .home-loan-emi-section {

        padding:
            32px
            11px
            42px;
    }


    .home-loan-emi-wrapper {

        gap: 25px;
    }


    .home-loan-emi-left h2 {

        font-size: 23px;
    }


    .home-loan-emi-left p {

        font-size: 11px;

        line-height: 1.45;
    }


    .home-loan-emi-btn {

        min-width: 195px;

        height: 44px;

        font-size: 12px;
    }


    .home-loan-emi-box {

        min-height: 245px;

        padding:
            24px
            15px
            22px;

        border-radius: 13px;
    }


    .emi-box-title {

        font-size: 10px;

        margin-bottom: 21px;
    }


    .emi-amount {

        font-size: 23px;
    }


    .emi-amount span {

        font-size: 12px;
    }


    .emi-info {

        font-size: 8px;

        margin-bottom: 23px;

        white-space: nowrap;
    }


    .emi-bottom {

        gap: 4px;
    }


    .emi-value strong {

        font-size: 14px;
    }


    .emi-value small {

        font-size: 8px;
    }

}


        



/* =====================================
   MSME PRODUCT SECTION
===================================== */

.msme-product-section {
    width: 100%;
    background: #ffffff;
    padding: 60px 20px 45px;
    font-family: Arial, Helvetica, sans-serif;
}

.msme-product-section .container {
    max-width: 1100px;
    margin: 0 auto;
}


/* =====================================
   HEADING
===================================== */

.msme-section-heading {
    text-align: center;
    margin-bottom: 65px;
}

.msme-section-heading h2 {
    margin: 0 0 6px;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 600;
    color: #333333;
}

.msme-section-heading span {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    color: #1769d1;
    margin-bottom: 6px;
}

.msme-section-heading p {
    max-width: 760px;
    margin: 0 auto;
    font-size: 13.5px;
    line-height: 1.35;
    color: #6b6b6b;
}


/* =====================================
   MAIN FEATURE WRAPPER
===================================== */

.msme-feature-wrapper {
    display: grid;
    grid-template-columns: 1fr 300px 1fr;
    align-items: start;
    column-gap: 40px;
}


/* =====================================
   FEATURE COLUMNS
===================================== */

.msme-features {
    display: flex;
    flex-direction: column;
    gap: 70px;
}

.msme-left {
    padding-top: 0;
}

.msme-right {
    padding-top: 0;
}


/* =====================================
   FEATURE ITEM
===================================== */

.msme-feature-item {
    display: flex;
    align-items: flex-start;
    min-height: 42px;
}


/* =====================================
   ICON BOX
===================================== */

.msme-icon {
    width: 38px;
    height: 36px;
    min-width: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 10px;

    background: #e5efff;
    border-radius: 4px;

    color: #2873dc;
    font-size: 17px;
}

.msme-icon i {
    line-height: 1;
}


/* =====================================
   FEATURE TEXT
===================================== */

.msme-feature-text {
    color: #222222;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 400;
    padding-top: 3px;
}


/* =====================================
   CENTER AREA
===================================== */

.msme-center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* =====================================
   BUSINESS IMAGE
===================================== */

.msme-business-image {
    width: 240px;
    height: 230px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 0;
    margin-bottom: 20px;
}

.msme-business-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}


/* =====================================
   APPLY BUTTON
===================================== */

.msme-apply-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 149px;
    height: 45px;

    background: #2873dc;
    color: #ffffff;

    text-decoration: none;

    border-radius: 7px;

    font-size: 13px;
    font-weight: 600;

    transition: all 0.3s ease;
}

.msme-apply-btn:hover {
    background: #155ec3;
    color: #ffffff;
    transform: translateY(-1px);
}


/* =====================================
   TABLET
===================================== */

@media (max-width: 900px) {

    .msme-feature-wrapper {
        grid-template-columns: 1fr 230px 1fr;
        column-gap: 20px;
    }

    .msme-business-image {
        width: 210px;
        height: 210px;
    }

    .msme-feature-text {
        font-size: 12px;
    }

}


/* =====================================
   MOBILE
===================================== */

@media (max-width: 767px) {

    .msme-product-section {
        padding: 40px 15px;
    }

    .msme-section-heading {
        margin-bottom: 35px;
    }

    .msme-section-heading h2 {
        font-size: 20px;
    }

    .msme-section-heading p {
        font-size: 13px;
        line-height: 1.5;
    }


    .msme-feature-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }


    /* Center image first on mobile */
    .msme-center {
        order: 1;
    }

    .msme-left {
        order: 2;
    }

    .msme-right {
        order: 3;
    }


    .msme-features {
        width: 100%;
        gap: 25px;
    }


    .msme-feature-item {
        width: 100%;
        max-width: 330px;
        margin: 0 auto;
    }


    .msme-business-image {
        width: 220px;
        height: 200px;
    }


    .msme-apply-btn {
        margin-bottom: 10px;
    }

}


/* =====================================
   SMALL MOBILE
===================================== */

@media (max-width: 480px) {

    .msme-product-section {
        padding: 35px 12px;
    }

    .msme-section-heading h2 {
        font-size: 19px;
    }

    .msme-section-heading span {
        font-size: 13px;
    }

    .msme-section-heading p {
        font-size: 12.5px;
    }

    .msme-business-image {
        width: 200px;
        height: 185px;
    }

    .msme-feature-text {
        font-size: 12.5px;
    }

}


/* =========================================
   MAIN SECTION
========================================= */

.overdraft-why-section {
    width: 100%;
    background: #ffffff;

    border-left: 4px solid #0d9cff;
    border-right: 4px solid #0d9cff;

    padding: 18px 35px 78px;

    box-sizing: border-box;

    font-family: Arial, Helvetica, sans-serif;
}


/* =========================================
   CONTAINER
========================================= */

.overdraft-container {
    max-width: 1090px;
    margin: 0 auto;
}


/* =========================================
   HEADING AREA
========================================= */

.overdraft-heading {
    text-align: center;
    margin-bottom: 42px;
}

.overdraft-heading h2 {
    margin: 0 0 3px;

    font-size: 22px;
    line-height: 1.3;

    font-weight: 600;

    color: #333333;
}

.overdraft-subtitle {
    font-size: 13px;
    line-height: 1.5;

    color: #2873dc;

    margin-bottom: 10px;
}

.overdraft-heading p {
    margin: 0 auto;

    max-width: 1000px;

    color: #6b6b6b;

    font-size: 13.5px;
    line-height: 1.35;

    font-weight: 400;
}


/* =========================================
   CARDS WRAPPER
========================================= */

.overdraft-cards {
    display: grid;

    grid-template-columns: repeat(6, 1fr);

    gap: 28px;

    align-items: stretch;
}


/* =========================================
   CARD
========================================= */

.overdraft-card {
    min-height: 194px;

    padding: 28px 21px 20px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #3978ff;

    border-radius: 15px;

    box-shadow: 0 5px 12px rgba(35, 87, 180, 0.10);

    transition: all 0.3s ease;
}


/* First 3 cards */
.overdraft-card:nth-child(1),
.overdraft-card:nth-child(2),
.overdraft-card:nth-child(3) {
    grid-column: span 2;
}


/* Last 2 cards centered */
.overdraft-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.overdraft-card:nth-child(5) {
    grid-column: 4 / span 2;
}


/* =========================================
   ICON
========================================= */

.overdraft-icon {
    width: 37px;
    height: 37px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 21px;

    background: #e7f0ff;

    border-radius: 4px;

    color: #2873dc;

    font-size: 17px;
}

.overdraft-icon i {
    line-height: 1;
}


/* =========================================
   CARD TITLE
========================================= */

.overdraft-card h3 {
    margin: 0 0 7px;

    color: #3b3b3b;

    font-size: 19px;
    line-height: 1.25;

    font-weight: 600;
}


/* =========================================
   CARD DESCRIPTION
========================================= */

.overdraft-card p {
    margin: 0;

    color: #666666;

    font-size: 13px;

    line-height: 1.25;

    font-weight: 400;
}


/* =========================================
   HOVER
========================================= */

.overdraft-card:hover {
    transform: translateY(-3px);

    box-shadow: 0 8px 18px rgba(35, 87, 180, 0.15);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .overdraft-why-section {
        padding-left: 20px;
        padding-right: 20px;
    }

    .overdraft-cards {
        grid-template-columns: repeat(2, 1fr);

        gap: 22px;
    }

    .overdraft-card:nth-child(1),
    .overdraft-card:nth-child(2),
    .overdraft-card:nth-child(3),
    .overdraft-card:nth-child(4),
    .overdraft-card:nth-child(5) {
        grid-column: auto;
    }

    .overdraft-card:last-child {
        grid-column: 1 / -1;

        max-width: 50%;

        margin: 0 auto;
        width: 100%;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .overdraft-why-section {
        padding: 30px 15px 45px;

        border-left-width: 2px;
        border-right-width: 2px;
    }


    .overdraft-heading {
        margin-bottom: 30px;
    }


    .overdraft-heading h2 {
        font-size: 20px;
    }


    .overdraft-subtitle {
        font-size: 13px;
    }


    .overdraft-heading p {
        font-size: 13px;

        line-height: 1.5;
    }


    .desktop-only {
        display: none;
    }


    .overdraft-cards {
        display: flex;

        flex-direction: column;

        gap: 20px;
    }


    .overdraft-card,
    .overdraft-card:last-child {
        width: 100%;

        max-width: 100%;

        min-height: auto;

        margin: 0;

        padding: 24px 20px;
    }


    .overdraft-icon {
        margin-bottom: 17px;
    }


    .overdraft-card h3 {
        font-size: 18px;
    }


    .overdraft-card p {
        font-size: 13px;

        line-height: 1.4;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .overdraft-heading h2 {
        font-size: 19px;
    }

    .overdraft-card {
        border-radius: 12px;
    }

    .overdraft-card h3 {
        font-size: 17px;
    }

}


/* ==========================================
   ELIGIBILITY & DOCUMENTS
========================================== */

#home-eligibility {
    width: 100%;
    background: #fff;
    padding: 0 30px 70px;
}

#home-eligibility .container-tab {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
}


/* ==========================================
   HEADING
========================================== */

#home-eligibility .home-section-header {
    text-align: center;
    margin-bottom: 44px;
}

#home-eligibility .home-section-title {
    margin: 0 0 8px;
    color: #363636;
    font-size: 26px;
    line-height: 1.2;
    font-weight: 700;
}

#home-eligibility .home-section-subtitle {
    margin: 0;
    color: #707070;
    font-size: 15px;
    line-height: 1.5;
}


/* ==========================================
   TABS
========================================== */

#home-eligibility .home-tabs {
    width: 710px;
    max-width: 100%;
    margin: 0 auto 48px;

    display: flex;
    align-items: center;

    padding: 4px;

    background: #edf4fd;
    border-radius: 8px;
}

#home-eligibility .home-tab {
    flex: 1;

    min-height: 44px;

    border: 0;
    outline: none;

    background: transparent;

    color: #333;

    font-size: 15px;
    font-weight: 500;

    border-radius: 7px;

    cursor: pointer;

    transition: all 0.25s ease;
}

#home-eligibility .home-tab.active {
    background: #2877df;
    color: #fff;
    box-shadow: 0 2px 5px rgba(40, 119, 223, 0.15);
}

#home-eligibility .home-tab:hover:not(.active) {
    color: #2877df;
}


/* ==========================================
   TAB CONTENT
========================================== */

#home-eligibility .home-tab-content {
    display: none;
}

#home-eligibility .home-tab-content.active {
    display: block;
}


/* ==========================================
   TWO COLUMN LAYOUT
========================================== */

#home-eligibility .home-eligibility-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 47px;

    align-items: start;
}


/* ==========================================
   COLUMN HEADINGS
========================================== */

#home-eligibility .home-eligibility-section > h3,
#home-eligibility .home-documents-section > h3 {
    margin: 0 0 23px;

    color: #3c3c3c;

    font-size: 19px;
    line-height: 1.3;

    font-weight: 500;
}

#home-eligibility .home-eligibility-section > h3::first-letter {
    color: #2877df;
}


/* ==========================================
   ELIGIBILITY LIST
========================================== */

#home-eligibility .home-checklist {
    padding: 0;
    margin: 0;

    list-style: none;

    display: flex;
    flex-direction: column;
    gap: 24px;
}

#home-eligibility .home-checklist-item {
    min-height: 72px;

    display: flex;
    align-items: center;

    padding: 12px 16px;

    background: #fff;

    border: 1.5px solid #7a9eff;
    border-radius: 13px;

    box-shadow:
        0 4px 10px rgba(40, 119, 223, 0.08);

    color: #383838;

    font-size: 16px;
    line-height: 1.25;
}


/* ==========================================
   CHECK ICON
========================================== */

#home-eligibility .home-checklist-icon {
    flex: 0 0 40px;

    width: 40px;
    height: 40px;

    margin-right: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #e7f0ff;

    border-radius: 5px;

    color: #2877df;
}

#home-eligibility .home-checklist-icon i {
    font-size: 21px;
    font-weight: 700;
}


/* ==========================================
   DOCUMENT ACCORDION
========================================== */

#home-eligibility .home-document-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

#home-eligibility .home-document-list details {
    width: 100%;

    background: #fff;

    border: 1.5px solid #7a9eff;
    border-radius: 13px;

    overflow: hidden;

    box-shadow:
        0 4px 10px rgba(40, 119, 223, 0.07);
}


/* SUMMARY */

#home-eligibility .home-document-list summary {
    min-height: 69px;

    padding: 0 23px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    list-style: none;

    cursor: pointer;

    color: #3c3c3c;

    font-size: 16px;
    font-weight: 600;
}

#home-eligibility .home-document-list summary::-webkit-details-marker {
    display: none;
}

#home-eligibility .home-document-list summary i {
    font-size: 13px;
    color: #333;

    transition: transform 0.25s ease;
}

#home-eligibility .home-document-list details[open] summary i {
    transform: rotate(180deg);
}


/* DOCUMENT CONTENT */

#home-eligibility .home-document-list details ul {
    margin: 0;
    padding: 0 25px 20px 45px;

    color: #555;

    font-size: 14px;
    line-height: 1.5;
}

#home-eligibility .home-document-list details li {
    margin-bottom: 7px;
}

#home-eligibility .home-document-list details li:last-child {
    margin-bottom: 0;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 991px) {

    #home-eligibility {
        padding: 0 20px 60px;
    }

    #home-eligibility .home-eligibility-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    #home-eligibility .home-tabs {
        width: 100%;
    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) {

    #home-eligibility {
        padding: 10px 15px 50px;
    }

    #home-eligibility .home-section-header {
        margin-bottom: 28px;
    }

    #home-eligibility .home-section-title {
        font-size: 23px;
    }

    #home-eligibility .home-section-subtitle {
        font-size: 14px;
    }


    #home-eligibility .home-tabs {
        flex-direction: column;
        gap: 3px;

        padding: 4px;

        margin-bottom: 35px;
    }

    #home-eligibility .home-tab {
        width: 100%;
        min-height: 42px;
    }


    #home-eligibility .home-eligibility-grid {
        gap: 30px;
    }


    #home-eligibility .home-eligibility-section > h3,
    #home-eligibility .home-documents-section > h3 {
        font-size: 18px;
        margin-bottom: 18px;
    }


    #home-eligibility .home-checklist {
        gap: 16px;
    }

    #home-eligibility .home-checklist-item {
        min-height: auto;
        padding: 14px;

        font-size: 14px;
    }

    #home-eligibility .home-checklist-icon {
        flex: 0 0 36px;

        width: 36px;
        height: 36px;

        margin-right: 14px;
    }


    #home-eligibility .home-document-list {
        gap: 16px;
    }

    #home-eligibility .home-document-list summary {
        min-height: 62px;

        padding: 0 17px;

        font-size: 14px;
    }

    #home-eligibility .home-document-list details ul {
        padding: 0 18px 18px 35px;
        font-size: 13px;
    }

}


/* lease rental css */



/* =========================================================
   DARK OVERLAY
========================================================= */

.home-loan-overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.45) 30%,
        rgba(0, 0, 0, 0.08) 65%,
        rgba(0, 0, 0, 0) 100%
    );

    z-index: 1;
}


/* =========================================================
   CONTAINER
========================================================= */

.home-loan-container {
    position: relative;
    z-index: 2;

    min-height: 525px;

    display: flex;
    align-items: center;
}


/* =========================================================
   CONTENT
========================================================= */

.home-loan-content {
    width: 50%;

    padding-left: 0;
    padding-top: 5px;
    padding-bottom: 5px;
}


/* =========================================================
   HEADING
========================================================= */

.home-loan-content h1 {
    margin: 0 0 8px 0;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 44px;
    line-height: 1.15;

    font-weight: 700;

    letter-spacing: 0;
}


.home-loan-content h1 span {
    color: #2f80ed;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.home-loan-content p {
    margin: 0 0 15px 0;

    color: rgba(255, 255, 255, 0.90);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;
    line-height: 1.5;

    font-weight: 400;
}


/* =========================================================
   APPLY NOW BUTTON
========================================================= */

.home-loan-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 86px;
    height: 35px;

    padding: 0 17px;

    background: #2878e5;

    color: #ffffff !important;

    border-radius: 4px;

    text-decoration: none !important;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;
    font-weight: 600;

    transition: all 0.3s ease;
}


.home-loan-btn:hover {
    background: #1265d2;

    color: #ffffff !important;

    transform: translateY(-1px);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.20);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .home-loan-hero {
        min-height: 525px;

        background-size: cover;

        background-position: center center;
    }


    .home-loan-container {
        min-height: 525px;
    }


    .home-loan-content {
        width: 50%;
    }


    .home-loan-content h1 {
        font-size: 44px;
    }


    .home-loan-content p {
        font-size: 15px;
    }
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .home-loan-hero {
        min-height: 450px;

        background-size: cover;

        background-position: center center;
    }


    .home-loan-container {
        min-height: 450px;
    }


    .home-loan-content {
        width: 50%;
    }


    .home-loan-content h1 {
        font-size: 36px;
    }


    .home-loan-content p {
        font-size: 14px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .home-loan-hero {

        min-height: 360px;

        /*
         * Keep the complete image visible better
         */
        background-size: 100% 100%;

        background-position: center center;

        background-repeat: no-repeat;
    }


    .home-loan-container {

        min-height: 360px;

        display: flex;

        align-items: center;

        padding-left: 30px;
        padding-right: 30px;

        box-sizing: border-box;
    }


    .home-loan-content {

        width: 52%;

        padding: 0;
    }


    .home-loan-content h1 {

        font-size: 29px;

        line-height: 1.18;

        margin-bottom: 9px;
    }


    .home-loan-content p {

        font-size: 12px;

        line-height: 1.45;

        margin-bottom: 15px;
    }


    .home-loan-btn {

        height: 35px;

        min-width: 86px;

        padding: 0 15px;

        font-size: 12px;
    }


    .home-loan-overlay {

        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.68) 0%,
            rgba(0, 0, 0, 0.43) 40%,
            rgba(0, 0, 0, 0.10) 75%,
            rgba(0, 0, 0, 0) 100%
        );
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .home-loan-hero {

        min-height: 300px;

        /*
         * IMPORTANT:
         * Cover was cropping the family image.
         * 100% 100% keeps the whole banner visible.
         */
        background-size: 100% 100%;

        background-position: center center;

        background-repeat: no-repeat;
    }


    .home-loan-container {

        min-height: 300px;

        width: 100%;

        display: flex;

        align-items: center;

        padding-top: 30px;
        padding-bottom: 30px;
        padding-left: 22px;
        padding-right: 22px;

        box-sizing: border-box;
    }


    .home-loan-content {

        width: 58%;

        padding: 0;
    }


    .home-loan-content h1 {

        font-size: 22px;

        line-height: 1.18;

        margin: 0 0 9px 0;
    }


    .home-loan-content p {

        font-size: 11px;

        line-height: 1.5;

        margin: 0 0 15px 0;
    }


    .home-loan-btn {

        height: 34px;

        min-width: 82px;

        padding: 0 15px;

        font-size: 11px;

        border-radius: 4px;
    }


    .home-loan-overlay {

        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.50) 42%,
            rgba(0, 0, 0, 0.12) 78%,
            rgba(0, 0, 0, 0.02) 100%
        );
    }
}


/* =========================================================
   IPHONE / SMALL MOBILE
========================================================= */

@media (max-width: 575px) {

    .home-loan-hero {

        min-height: 270px;

        /*
         * Full banner image visible
         */
        background-size: 100% 100%;

        background-position: center center;

        background-repeat: no-repeat;
    }


    .home-loan-container {

        min-height: 270px;

        padding-top: 25px;
        padding-bottom: 25px;
        padding-left: 18px;
        padding-right: 18px;

        align-items: center;
    }


    .home-loan-content {

        width: 58%;

        max-width: 230px;

        padding: 0;
    }


    .home-loan-content h1 {

        font-size: 20px;

        line-height: 1.18;

        margin-bottom: 8px;
    }


    .home-loan-content p {

        font-size: 10px;

        line-height: 1.45;

        margin-bottom: 13px;
    }


    .home-loan-btn {

        height: 33px;

        min-width: 82px;

        padding: 0 14px;

        font-size: 10px;
    }


    .home-loan-overlay {

        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.70) 0%,
            rgba(0, 0, 0, 0.48) 43%,
            rgba(0, 0, 0, 0.15) 75%,
            rgba(0, 0, 0, 0.02) 100%
        );
    }
}


/* =========================================================
   IPHONE SE / 375px
========================================================= */

@media (max-width: 375px) {

    .home-loan-hero {

        min-height: 245px;

        background-size: 100% 100%;

        background-position: center center;
    }


    .home-loan-container {

        min-height: 245px;

        padding-top: 22px;
        padding-bottom: 22px;
        padding-left: 15px;
        padding-right: 15px;
    }


    .home-loan-content {

        width: 58%;

        max-width: 210px;
    }


    .home-loan-content h1 {

        font-size: 18px;

        line-height: 1.17;

        margin-bottom: 7px;
    }


    .home-loan-content p {

        font-size: 9px;

        line-height: 1.4;

        margin-bottom: 12px;
    }


    .home-loan-btn {

        height: 31px;

        min-width: 78px;

        padding: 0 12px;

        font-size: 9px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .home-loan-hero {

        min-height: 230px;

        background-size: 100% 100%;

        background-position: center center;
    }


    .home-loan-container {

        min-height: 230px;

        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 13px;
        padding-right: 13px;
    }


    .home-loan-content {

        width: 58%;

        max-width: 195px;
    }


    .home-loan-content h1 {

        font-size: 17px;

        line-height: 1.17;
    }


    .home-loan-content p {

        font-size: 8.5px;

        line-height: 1.4;
    }


    .home-loan-btn {

        height: 30px;

        min-width: 75px;

        padding: 0 11px;

        font-size: 9px;
    }
}


/* =========================================================
   EXTRA SMALL DEVICES
========================================================= */

@media (max-width: 320px) {

    .home-loan-hero {

        min-height: 215px;

        background-size: 100% 100%;
    }


    .home-loan-container {

        min-height: 215px;

        padding-left: 12px;
        padding-right: 12px;
    }


    .home-loan-content {

        width: 57%;
    }


    .home-loan-content h1 {

        font-size: 16px;
    }


    .home-loan-content p {

        font-size: 8px;
    }


    .home-loan-btn {

        height: 29px;

        min-width: 72px;

        font-size: 8px;
    }
}


/* =========================================================
   MAIN SECTION
========================================================= */

.property-loan-why {
    width: 100%;
    background: #f8fafc;
    padding: 25px 20px 60px;
    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.property-loan-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.property-loan-heading {
    text-align: center;
    margin-bottom: 48px;
}

.property-loan-heading h2 {
    margin: 0 0 4px;

    font-size: 26px;
    line-height: 1.3;

    font-weight: 600;
    color: #333333;
}


/* FIRST PARAGRAPH */

.property-loan-intro {
    margin: 0 auto 14px;

    font-size: 15px;
    line-height: 1.25;

    font-weight: 400;
}


/* BLUE TEXT */

.blue-text {
    color: #2875df;
}


/* SECOND PARAGRAPH */

.property-loan-description {
    margin: 0 auto;

    color: #777777;

    font-size: 15px;
    line-height: 1.35;

    font-weight: 400;
}


/* =========================================================
   CARDS GRID
========================================================= */

.property-loan-cards {
    display: grid;

    grid-template-columns: repeat(6, 1fr);

    column-gap: 32px;
    row-gap: 34px;

    align-items: start;
}


/* =========================================================
   CARD
========================================================= */

.property-loan-card {

    grid-column: span 2;

    min-height: 218px;

    padding: 32px 24px 25px;

    background: #ffffff;

    border: 1px solid #4d7ff0;

    border-radius: 16px;

    box-shadow: 0 8px 22px rgba(38, 102, 220, 0.12);

    box-sizing: border-box;

    transition: all 0.3s ease;
}


/* =========================================================
   BOTTOM CARDS
========================================================= */

/*
   4th card starts around 18%
   5th card starts around 50%
   This creates the centered 2-card row
*/

.property-loan-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.property-loan-card:nth-child(5) {
    grid-column: 4 / span 2;
}


/* =========================================================
   ICON BOX
========================================================= */

.property-loan-icon {

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #e6efff;

    border-radius: 5px;

    margin-bottom: 25px;
}


/* ICON */

.property-loan-icon i {

    font-size: 19px;

    color: #2875df;
}


/* =========================================================
   CARD TITLE
========================================================= */

.property-loan-card h3 {

    margin: 0 0 8px;

    color: #3b3b3b;

    font-size: 22px;

    line-height: 1.2;

    font-weight: 600;
}


/* =========================================================
   CARD DESCRIPTION
========================================================= */

.property-loan-card p {

    margin: 0;

    color: #707070;

    font-size: 15px;

    line-height: 1.25;

    font-weight: 400;
}


/* =========================================================
   HOVER
========================================================= */

.property-loan-card:hover {

    transform: translateY(-3px);

    box-shadow: 0 12px 28px rgba(38, 102, 220, 0.17);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .property-loan-cards {

        grid-template-columns: repeat(2, 1fr);

        gap: 25px;

    }

    .property-loan-card,
    .property-loan-card:nth-child(4),
    .property-loan-card:nth-child(5) {

        grid-column: auto;

    }

    .property-loan-card:last-child {

        grid-column: 1 / -1;

        max-width: calc(50% - 12px);

        margin: 0 auto;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .property-loan-why {

        padding: 30px 15px 45px;

    }


    .property-loan-heading {

        margin-bottom: 30px;

    }


    .property-loan-heading h2 {

        font-size: 23px;

    }


    .property-loan-intro {

        font-size: 14px;

        line-height: 1.45;

    }


    .property-loan-description {

        font-size: 14px;

        line-height: 1.45;

    }


    .desktop-only {

        display: none;

    }


    .property-loan-cards {

        display: flex;

        flex-direction: column;

        gap: 20px;

    }


    .property-loan-card,
    .property-loan-card:nth-child(4),
    .property-loan-card:nth-child(5) {

        width: 100%;

        max-width: 100%;

        min-height: auto;

        margin: 0;

        padding: 25px 20px;

    }


    .property-loan-card h3 {

        font-size: 20px;

    }


    .property-loan-card p {

        font-size: 14px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .property-loan-heading h2 {

        font-size: 21px;

    }


    .property-loan-card {

        border-radius: 14px;

    }


    .property-loan-card h3 {

        font-size: 19px;

    }

}

    /* =========================================================
   PROPERTY OVERVIEW - RESPONSIVE CSS
========================================================= */

.property-overview-section {
    width: 100%;
    padding: 35px 20px 55px;
    background: #f8fafc;
    overflow: hidden;
    box-sizing: border-box;
}

.property-overview-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.property-overview-heading {
    text-align: center;
    margin-bottom: 45px;
}

.property-overview-heading h4 {
    margin-bottom: 8px;
}

.property-overview-heading h2 {
    margin-bottom: 10px;
}

.property-overview-heading p {
    margin: 0 auto;
    max-width: 1100px;
    color: #777;
    font-size: 15px;
    line-height: 1.45;
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.property-overview-content {
    display: grid;
    grid-template-columns: 1fr 340px 1fr;
    align-items: center;
    gap: 25px;
}


/* =========================================================
   FEATURES
========================================================= */

.property-features {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 350px;
}

.property-feature {
    display: flex;
    align-items: center;
    gap: 12px;
}

.property-feature-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #e5efff;
    border-radius: 6px;

    color: #2875df;
}

.property-feature-icon i {
    font-size: 18px;
    color: #2875df;
}

.property-feature-text {
    color: #252525;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 500;
}


/* =========================================================
   CENTER IMAGE
========================================================= */

.property-overview-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.property-image-wrapper {
    width: 340px;
    height: 250px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.property-main-image {
    display: block;
    width: 100%;
    max-width: 340px;
    height: auto;
    object-fit: contain;
}


/* =========================================================
   APPLY BUTTON
========================================================= */

.property-apply-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 168px;
    height: 50px;

    margin-top: 5px;

    background: #2875df;
    color: #fff;

    border-radius: 8px;

    text-decoration: none;

    font-size: 15px;
    font-weight: 600;

    transition: 0.3s ease;
}

.property-apply-btn:hover {
    background: #1f64c5;
    color: #fff;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .property-overview-section {
        padding: 35px 20px 50px;
    }

    .property-overview-content {
        grid-template-columns: 1fr 280px 1fr;
        gap: 15px;
    }

    .property-features {
        height: 320px;
    }

    .property-image-wrapper {
        width: 280px;
        height: 220px;
    }

    .property-main-image {
        max-width: 280px;
    }

    .property-feature-text {
        font-size: 13px;
    }

    .property-feature-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .property-overview-heading p {
        font-size: 14px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .property-overview-section {
        padding: 30px 15px 45px;
    }

    .property-overview-container {
        width: 100%;
    }


    /* HEADING */

    .property-overview-heading {
        margin-bottom: 25px;
    }

    .property-overview-heading h4 {
        font-size: 14px;
        margin-bottom: 7px;
    }

    .property-overview-heading h2 {
        font-size: 23px;
        line-height: 1.3;
        margin-bottom: 12px;
    }

    .property-overview-heading p {
        width: 100%;
        font-size: 14px;
        line-height: 1.5;
    }


    /* REMOVE DESKTOP BR */

    .desktop-break {
        display: none;
    }


    /* =====================================================
       MOBILE CONTENT
    ===================================================== */

    .property-overview-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 20px;
    }


    /* CENTER IMAGE FIRST */

    .property-overview-center {
        order: 1;
        width: 100%;
    }


    /* LEFT FEATURES */

    .property-features-left {
        order: 2;
    }


    /* RIGHT FEATURES */

    .property-features-right {
        order: 3;
    }


    /* =====================================================
       IMAGE
    ===================================================== */

    .property-image-wrapper {
        width: 100%;
        max-width: 320px;
        height: 220px;
        margin: 0 auto;
    }

    .property-main-image {
        width: 100%;
        max-width: 320px;
        height: auto;
    }


    /* =====================================================
       BUTTON
    ===================================================== */

    .property-apply-btn {
        width: 165px;
        height: 48px;
        margin: 0 auto;
    }


    /* =====================================================
       FEATURES
    ===================================================== */

    .property-features {
        width: 100%;
        height: auto;

        display: flex;
        flex-direction: column;

        gap: 18px;
    }

    .property-feature {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .property-feature-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
    }

    .property-feature-text {
        font-size: 14px;
        line-height: 1.35;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .property-overview-section {
        padding: 25px 12px 40px;
    }

    .property-overview-heading h4 {
        font-size: 13px;
    }

    .property-overview-heading h2 {
        font-size: 20px;
    }

    .property-overview-heading p {
        font-size: 13px;
        line-height: 1.5;
    }


    .property-image-wrapper {
        max-width: 285px;
        height: 195px;
    }

    .property-main-image {
        max-width: 285px;
    }


    .property-feature {
        align-items: flex-start;
    }

    .property-feature-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .property-feature-icon i {
        font-size: 17px;
    }

    .property-feature-text {
        font-size: 13px;
        line-height: 1.4;
        padding-top: 2px;
    }


    .property-apply-btn {
        width: 155px;
        height: 46px;
        font-size: 14px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .property-overview-heading h2 {
        font-size: 19px;
    }

    .property-overview-heading p {
        font-size: 12.5px;
    }

    .property-image-wrapper {
        max-width: 260px;
        height: 180px;
    }

    .property-main-image {
        max-width: 260px;
    }

    .property-feature-text {
        font-size: 12.5px;
    }
}

/* =========================================================
   PROPERTY OVERVIEW - MOBILE FIX
========================================================= */

@media (max-width: 767px) {

    .property-overview-section {
        width: 100% !important;
        padding: 25px 15px 40px !important;
        margin: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .property-overview-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }


    /* =====================================================
       HEADING
    ===================================================== */

    .property-overview-heading {
        width: 100% !important;
        text-align: center !important;
        margin: 0 0 25px !important;
        padding: 0 !important;
    }

    .property-overview-heading h4 {
        margin: 0 0 7px !important;
        font-size: 14px !important;
        line-height: 1.3 !important;
    }

    .property-overview-heading h2 {
        margin: 0 0 12px !important;
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    .property-overview-heading p {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }

    .desktop-break {
        display: none !important;
    }


    /* =====================================================
       MAIN CONTENT
    ===================================================== */

    .property-overview-content {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }


    /* =====================================================
       CENTER IMAGE SECTION
    ===================================================== */

    .property-overview-center {
        order: 1 !important;

        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* IMAGE BOX */

    .property-image-wrapper {
        width: 100% !important;
        max-width: 300px !important;

        height: 210px !important;
        min-height: 210px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        overflow: hidden !important;
        box-sizing: border-box !important;
    }


    /* ACTUAL IMAGE */

    .property-main-image {
        display: block !important;

        width: auto !important;
        max-width: 100% !important;

        height: 205px !important;
        max-height: 205px !important;

        object-fit: contain !important;

        margin: 0 auto !important;
        padding: 0 !important;
    }


    /* =====================================================
       APPLY BUTTON
    ===================================================== */

    .property-apply-btn {
        order: 2 !important;

        width: 210px !important;
        max-width: 210px !important;

        height: 48px !important;
        min-height: 48px !important;

        margin: 5px auto 28px !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: #2875df !important;
        color: #ffffff !important;

        border-radius: 8px !important;

        font-size: 16px !important;
        line-height: 1 !important;
        font-weight: 600 !important;

        text-decoration: none !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       LEFT + RIGHT FEATURES
    ===================================================== */

    .property-features {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 16px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .property-features-left {
        order: 3 !important;
    }

    .property-features-right {
        order: 4 !important;

        margin-top: 16px !important;
    }


    /* =====================================================
       EACH FEATURE
    ===================================================== */

    .property-feature {
        width: 100% !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;

        gap: 14px !important;

        margin: 0 !important;
        padding: 0 !important;

        min-height: 50px !important;
    }


    /* =====================================================
       ICON
    ===================================================== */

    .property-feature-icon {
        width: 46px !important;
        min-width: 46px !important;

        height: 46px !important;
        min-height: 46px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: #e5efff !important;

        border-radius: 7px !important;

        margin: 0 !important;
        padding: 0 !important;

        flex-shrink: 0 !important;
    }


    .property-feature-icon i {
        font-size: 19px !important;
        line-height: 1 !important;
        color: #2875df !important;
    }


    /* =====================================================
       FEATURE TEXT
    ===================================================== */

    .property-feature-text {
        width: auto !important;
        max-width: calc(100% - 60px) !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #252525 !important;

        font-size: 14px !important;
        line-height: 1.4 !important;

        font-weight: 500 !important;

        text-align: left !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
    }


    /* REMOVE FORCED DESKTOP LINE BREAKS */

    .property-feature-text br {
        display: none !important;
    }

}


/* =========================================================
   SMALL MOBILE - 480px
========================================================= */

@media (max-width: 480px) {

    .property-overview-section {
        padding: 22px 15px 35px !important;
    }


    .property-overview-heading {
        margin-bottom: 20px !important;
    }


    .property-overview-heading h4 {
        font-size: 13px !important;
    }


    .property-overview-heading h2 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }


    .property-overview-heading p {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
    }


    /* SMALLER IMAGE */

    .property-image-wrapper {
        width: 100% !important;
        max-width: 280px !important;

        height: 190px !important;
        min-height: 190px !important;
    }


    .property-main-image {
        height: 185px !important;
        max-height: 185px !important;
        max-width: 280px !important;
    }


    /* BUTTON */

    .property-apply-btn {
        width: 200px !important;
        max-width: 200px !important;

        height: 47px !important;
        min-height: 47px !important;

        margin-top: 5px !important;
        margin-bottom: 25px !important;

        font-size: 15px !important;
    }


    /* FEATURES */

    .property-features {
        gap: 14px !important;
    }


    .property-feature {
        gap: 12px !important;
        min-height: 48px !important;
    }


    .property-feature-icon {
        width: 43px !important;
        min-width: 43px !important;

        height: 43px !important;
        min-height: 43px !important;
    }


    .property-feature-icon i {
        font-size: 18px !important;
    }


    .property-feature-text {
        font-size: 13.5px !important;
        line-height: 1.4 !important;

        max-width: calc(100% - 55px) !important;
    }

}


/* =========================================================
   VERY SMALL MOBILE - 360px
========================================================= */

@media (max-width: 360px) {

    .property-overview-heading h2 {
        font-size: 19px !important;
    }


    .property-overview-heading p {
        font-size: 12px !important;
    }


    .property-image-wrapper {
        max-width: 255px !important;
        height: 175px !important;
        min-height: 175px !important;
    }


    .property-main-image {
        max-width: 255px !important;
        height: 170px !important;
        max-height: 170px !important;
    }


    .property-apply-btn {
        width: 185px !important;
        max-width: 185px !important;
    }


    .property-feature-icon {
        width: 40px !important;
        min-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;
    }


    .property-feature-text {
        font-size: 13px !important;
        max-width: calc(100% - 52px) !important;
    }

}




/* =========================================================
   MAIN SECTION
========================================================= */

.property-benefits-section {

    width: 100%;

    background: #f8fafc;

    padding: 25px 15px 70px;

    overflow: hidden;

    box-sizing: border-box;
}


/* =========================================================
   CONTAINER
========================================================= */

.property-benefits-container {

    width: 100%;

    max-width: 1250px;

    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.property-benefits-heading {

    text-align: center;

    margin-bottom: 48px;
}


.property-benefits-heading h2 {

    margin: 0 0 5px;

    color: #333333;

    font-size: 26px;

    line-height: 1.3;

    font-weight: 600;
}


.property-benefits-heading p {

    margin: 0;

    color: #707070;

    font-size: 15px;

    line-height: 1.4;

    font-weight: 400;
}


/* =========================================================
   GRID
========================================================= */

.property-benefits-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    column-gap: 32px;

    row-gap: 50px;

    width: 100%;
}


/* =========================================================
   CARD
========================================================= */

.property-benefit-card {

    width: 100%;

    min-height: 220px;

    box-sizing: border-box;

    padding: 32px 24px 25px;

    background: #ffffff;

    border: 1px solid #4d7ff0;

    border-radius: 16px;

    box-shadow: 0 7px 20px rgba(40, 117, 223, 0.10);

    transition: all 0.3s ease;
}


/* =========================================================
   ICON BOX
========================================================= */

.property-benefit-icon {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e5efff;

    border-radius: 5px;

    margin-bottom: 26px;
}


.property-benefit-icon i {

    color: #2875df;

    font-size: 19px;

    line-height: 1;
}


/* =========================================================
   CARD TITLE
========================================================= */

.property-benefit-card h3 {

    margin: 0 0 8px;

    color: #3b3b3b;

    font-size: 22px;

    line-height: 1.25;

    font-weight: 600;
}


/* =========================================================
   CARD TEXT
========================================================= */

.property-benefit-card p {

    margin: 0;

    color: #555555;

    font-size: 15px;

    line-height: 1.25;

    font-weight: 400;
}


/* =========================================================
   HOVER
========================================================= */

.property-benefit-card:hover {

    transform: translateY(-3px);

    box-shadow: 0 12px 28px rgba(40, 117, 223, 0.16);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .property-benefits-section {

        padding: 30px 20px 55px;
    }

    .property-benefits-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 25px;
    }

    .property-benefit-card {

        min-height: 220px;
    }

    .property-benefit-card h3 {

        font-size: 20px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .property-benefits-section {

        padding: 28px 15px 45px;
    }


    /* HEADING */

    .property-benefits-heading {

        margin-bottom: 30px;
    }


    .property-benefits-heading h2 {

        font-size: 22px;

        line-height: 1.3;
    }


    .property-benefits-heading p {

        font-size: 14px;
    }


    /* ONE CARD PER ROW */

    .property-benefits-grid {

        display: flex;

        flex-direction: column;

        gap: 20px;
    }


    /* CARD */

    .property-benefit-card {

        width: 100%;

        min-height: auto;

        padding: 25px 20px;

        border-radius: 14px;
    }


    /* ICON */

    .property-benefit-icon {

        width: 42px;

        height: 42px;

        margin-bottom: 22px;
    }


    /* TITLE */

    .property-benefit-card h3 {

        font-size: 20px;

        line-height: 1.3;

        margin-bottom: 8px;
    }


    /* TEXT */

    .property-benefit-card p {

        font-size: 14px;

        line-height: 1.45;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .property-benefits-section {

        padding: 25px 12px 40px;
    }


    .property-benefits-heading h2 {

        font-size: 20px;
    }


    .property-benefits-heading p {

        font-size: 13px;
    }


    .property-benefit-card {

        padding: 23px 18px;

        border-radius: 13px;
    }


    .property-benefit-icon {

        width: 40px;

        height: 40px;

        margin-bottom: 20px;
    }


    .property-benefit-icon i {

        font-size: 18px;
    }


    .property-benefit-card h3 {

        font-size: 19px;
    }


    .property-benefit-card p {

        font-size: 13.5px;

        line-height: 1.45;
    }

}





/* =========================================================
   MAIN SECTION
========================================================= */

.property-eligibility-section {
    width: 100%;
    padding: 30px 15px 70px;
    background: #f8fafc;
    box-sizing: border-box;
    overflow: hidden;
}

.property-eligibility-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
}


/* =========================================================
   TABS
========================================================= */

.property-eligibility-tabs {

    width: 100%;

    display: grid;

    grid-template-columns:
        1fr
        1fr
        1.25fr
        1.25fr
        1.2fr;

    gap: 0;

    padding: 4px;

    background: #eaf2fc;

    border-radius: 10px;

    box-sizing: border-box;

    margin-bottom: 48px;
}


/* TAB */

.property-eligibility-tab {

    border: 0;

    background: transparent;

    color: #333;

    min-height: 64px;

    padding: 8px 12px;

    border-radius: 8px;

    font-size: 15px;

    line-height: 1.15;

    font-weight: 500;

    cursor: pointer;

    transition: all 0.25s ease;

    font-family: inherit;
}


/* ACTIVE TAB */

.property-eligibility-tab.active {

    background: #2875df;

    color: #ffffff;

    box-shadow: 0 3px 8px rgba(40,117,223,0.20);
}


/* HOVER */

.property-eligibility-tab:not(.active):hover {

    background: rgba(40,117,223,0.08);

    color: #2875df;
}


/* =========================================================
   TAB CONTENT
========================================================= */

.property-eligibility-tab-content {

    display: none;

    width: 100%;
}

.property-eligibility-tab-content.active {

    display: block;
}


/* =========================================================
   TWO COLUMNS
========================================================= */

.property-eligibility-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 48px;

    align-items: start;
}


/* =========================================================
   COLUMN TITLE
========================================================= */

.property-column-title {

    margin: 0 0 20px;

    color: #333333;

    font-size: 20px;

    line-height: 1.3;

    font-weight: 500;
}


/* =========================================================
   CRITERIA LIST
========================================================= */

.property-criteria-list {

    display: flex;

    flex-direction: column;

    gap: 24px;
}


/* =========================================================
   CRITERIA CARD
========================================================= */

.property-criteria-card {

    width: 100%;

    min-height: 74px;

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 14px 16px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #4d7ff0;

    border-radius: 14px;

    box-shadow:
        0 6px 18px rgba(40,117,223,0.10);

}


/* =========================================================
   CHECK ICON
========================================================= */

.property-card-icon {

    width: 42px;

    height: 42px;

    min-width: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e5efff;

    border-radius: 5px;

    color: #2875df;
}

.property-card-icon i {

    font-size: 21px;

    color: #2875df;
}


/* =========================================================
   CARD TEXT
========================================================= */

.property-card-text {

    color: #3d3d3d;

    font-size: 16px;

    line-height: 1.25;

    font-weight: 400;
}


/* =========================================================
   DOCUMENT LIST
========================================================= */

.property-document-list {

    display: flex;

    flex-direction: column;

    gap: 24px;
}


/* =========================================================
   DOCUMENT CARD
========================================================= */

.property-document-card {

    width: 100%;

    min-height: 74px;

    display: flex;

    align-items: center;

    gap: 24px;

    padding: 14px 24px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #4d7ff0;

    border-radius: 14px;

    box-shadow:
        0 6px 18px rgba(40,117,223,0.10);

    color: #3d3d3d;

    font-size: 16px;

    line-height: 1.25;

    font-weight: 400;
}


/* =========================================================
   DOCUMENT ICON
========================================================= */

.property-document-icon {

    width: 42px;

    height: 42px;

    min-width: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e5efff;

    border-radius: 5px;
}

.property-document-icon i {

    color: #2875df;

    font-size: 19px;
}


/* =========================================================
   CARD HOVER
========================================================= */

.property-criteria-card,
.property-document-card {

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.property-criteria-card:hover,
.property-document-card:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 24px rgba(40,117,223,0.15);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .property-eligibility-section {

        padding: 25px 20px 55px;
    }


    .property-eligibility-tabs {

        grid-template-columns: repeat(3, 1fr);

        row-gap: 4px;

        margin-bottom: 35px;
    }


    .property-eligibility-grid {

        grid-template-columns: 1fr;

        gap: 35px;
    }


    .property-eligibility-tab {

        font-size: 14px;

        min-height: 58px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .property-eligibility-section {

        padding: 22px 12px 45px !important;
    }


    .property-eligibility-container {

        width: 100% !important;
    }


    /* =====================================================
       TABS
    ===================================================== */

    .property-eligibility-tabs {

        display: flex !important;

        width: 100% !important;

        overflow-x: auto !important;

        overflow-y: hidden !important;

        gap: 5px !important;

        padding: 4px !important;

        margin-bottom: 30px !important;

        border-radius: 9px !important;

        scrollbar-width: none;
    }

    .property-eligibility-tabs::-webkit-scrollbar {
        display: none;
    }


    .property-eligibility-tab {

        flex: 0 0 145px !important;

        width: 145px !important;

        min-width: 145px !important;

        min-height: 58px !important;

        padding: 7px 8px !important;

        font-size: 13px !important;

        line-height: 1.15 !important;

        border-radius: 7px !important;

        white-space: normal !important;
    }


    /* =====================================================
       CONTENT
    ===================================================== */

    .property-eligibility-grid {

        display: flex !important;

        flex-direction: column !important;

        gap: 30px !important;

        width: 100% !important;
    }


    .property-eligibility-column {

        width: 100% !important;
    }


    /* =====================================================
       TITLES
    ===================================================== */

    .property-column-title {

        margin-bottom: 15px !important;

        font-size: 18px !important;

        line-height: 1.3 !important;
    }


    /* =====================================================
       CARDS
    ===================================================== */

    .property-criteria-list,
    .property-document-list {

        gap: 14px !important;
    }


    .property-criteria-card,
    .property-document-card {

        width: 100% !important;

        min-height: 64px !important;

        padding: 12px !important;

        gap: 12px !important;

        border-radius: 11px !important;
    }


    /* =====================================================
       ICON
    ===================================================== */

    .property-card-icon,
    .property-document-icon {

        width: 40px !important;

        height: 40px !important;

        min-width: 40px !important;
    }


    .property-card-icon i {

        font-size: 19px !important;
    }


    .property-document-icon i {

        font-size: 17px !important;
    }


    /* =====================================================
       TEXT
    ===================================================== */

    .property-card-text,
    .property-document-card {

        font-size: 14px !important;

        line-height: 1.35 !important;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .property-eligibility-section {

        padding-left: 10px !important;

        padding-right: 10px !important;
    }


    .property-eligibility-tab {

        flex-basis: 135px !important;

        width: 135px !important;

        min-width: 135px !important;

        font-size: 12px !important;
    }


    .property-column-title {

        font-size: 17px !important;
    }


    .property-criteria-card,
    .property-document-card {

        padding: 11px !important;

        gap: 11px !important;
    }


    .property-card-icon,
    .property-document-icon {

        width: 38px !important;

        height: 38px !important;

        min-width: 38px !important;
    }


    .property-card-text,
    .property-document-card {

        font-size: 13px !important;

        line-height: 1.35 !important;
    }

}




/* =========================================================
   PROPERTY OVERVIEW SECTION
========================================================= */

.property-overview-section {
    width: 100%;
    background: #f8fafc;
    padding: 35px 20px 55px;
    overflow: hidden;
}


/* MAIN CONTAINER */

.property-overview-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.property-overview-heading {
    text-align: center;
    margin-bottom: 45px;
}

.property-overview-label {
    color: #2875df;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 8px;
}

.property-overview-heading h2 {
    margin: 0 0 8px;
    color: #333333;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 600;
}

.property-overview-heading p {
    margin: 0;
    color: #727272;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 400;
}


/* =========================================================
   MAIN 3 COLUMN AREA
========================================================= */

.property-overview-content {
    display: grid;
    grid-template-columns: 1fr 340px 1fr;
    align-items: center;
    column-gap: 25px;
}


/* =========================================================
   FEATURES
========================================================= */

.property-features {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 350px;
}

.property-features-left {
    align-items: flex-start;
}

.property-features-right {
    align-items: flex-start;
}


/* FEATURE */

.property-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 65px;
}


/* =========================================================
   ICON BOX
========================================================= */

.property-feature-icon {
    width: 41px;
    height: 41px;
    min-width: 41px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #e5efff;
    border-radius: 6px;

    color: #2875df;

    font-size: 19px;
}


/* ICON */

.property-feature-icon i {
    color: #2875df;
}


/* =========================================================
   FEATURE TEXT
========================================================= */

.property-feature-text {
    color: #252525;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 500;
}


/* =========================================================
   CENTER IMAGE
========================================================= */

.property-overview-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/* IMAGE WRAPPER */

.property-image-wrapper {
    width: 330px;
    height: 250px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* IMAGE */

.property-main-image {
    width: 100%;
    max-width: 330px;
    height: auto;
    object-fit: contain;
    display: block;
}


/* =========================================================
   APPLY BUTTON
========================================================= */

.property-apply-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 168px;
    height: 50px;

    background: #2875df;
    color: #ffffff;

    border-radius: 8px;

    text-decoration: none;

    font-size: 15px;
    font-weight: 600;

    margin-top: 5px;

    transition: all 0.3s ease;
}

.property-apply-btn:hover {
    background: #1f64c5;
    color: #ffffff;
    transform: translateY(-2px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .property-overview-section {
        padding: 35px 20px 50px;
    }

    .property-overview-content {
        grid-template-columns: 1fr 280px 1fr;
        column-gap: 12px;
    }

    .property-image-wrapper {
        width: 280px;
        height: 220px;
    }

    .property-main-image {
        max-width: 280px;
    }

    .property-feature-text {
        font-size: 13px;
    }

    .property-feature-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 17px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .property-overview-section {
        padding: 35px 15px 45px;
    }

    .property-overview-heading {
        margin-bottom: 25px;
    }

    .property-overview-label {
        font-size: 14px;
    }

    .property-overview-heading h2 {
        font-size: 22px;
    }

    .property-overview-heading p {
        font-size: 14px;
        line-height: 1.5;
    }

    .desktop-break {
        display: none;
    }


    /* STACK EVERYTHING */

    .property-overview-content {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }


    /* CENTER IMAGE FIRST */

    .property-overview-center {
        order: 1;
        width: 100%;
    }


    .property-features-left {
        order: 2;
    }

    .property-features-right {
        order: 3;
    }


    /* FEATURES */

    .property-features {
        width: 100%;
        height: auto;
        gap: 15px;
    }


    .property-feature {
        width: 100%;
        min-height: auto;
        gap: 12px;
    }


    .property-feature-text {
        font-size: 14px;
    }


    /* IMAGE */

    .property-image-wrapper {
        width: 100%;
        max-width: 320px;
        height: 220px;
    }

    .property-main-image {
        width: 100%;
        max-width: 320px;
    }


    /* BUTTON */

    .property-apply-btn {
        margin-bottom: 15px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .property-overview-heading h2 {
        font-size: 20px;
    }

    .property-overview-heading p {
        font-size: 13px;
    }

    .property-image-wrapper {
        max-width: 290px;
        height: 200px;
    }

    .property-main-image {
        max-width: 290px;
    }

}



/* =========================================================
   MAIN SECTION
========================================================= */

.home-loan-emi-section {

    width: 100%;

    background: #edf4fd;

    padding: 45px 25px 60px;

    box-sizing: border-box;

    overflow: hidden;
}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.home-loan-emi-wrapper {

    width: 100%;

    max-width: 1120px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 70px;

    box-sizing: border-box;
}


/* =========================================================
   LEFT SIDE
========================================================= */

.home-loan-emi-left {

    flex: 1;

    min-width: 0;
}


.home-loan-emi-left h2 {

    margin: 0 0 12px;

    color: #333333;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 34px;

    font-weight: 600;

    line-height: 1.15;

    letter-spacing: -0.5px;
}


.home-loan-emi-left p {

    margin: 0 0 22px;

    color: #707070;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    line-height: 1.4;
}


/* =========================================================
   BUTTON
========================================================= */

.home-loan-emi-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    min-width: 215px;

    height: 48px;

    padding: 0 22px;

    background: #2878e5;

    color: #ffffff !important;

    border-radius: 7px;

    text-decoration: none !important;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    font-weight: 600;

    box-sizing: border-box;

    transition:
        all .25s ease;
}


.home-loan-emi-btn:hover {

    background: #1d66cc;

    color: #ffffff !important;

    transform: translateY(-1px);

    box-shadow:
        0 5px 14px rgba(40,120,229,.20);
}


.home-loan-emi-btn span {

    font-size: 23px;

    line-height: 1;
}


/* =========================================================
   RIGHT EMI CARD - LARGE
========================================================= */

.home-loan-emi-box {

    flex: 0 0 560px;

    width: 560px;

    min-height: 275px;

    padding: 36px 34px 30px;

    box-sizing: border-box;

    border-radius: 17px;

    background:
        linear-gradient(
            115deg,
            #2878e5 0%,
            #493ddd 48%,
            #b500d9 100%
        );

    color: #ffffff;

    box-shadow:
        0 7px 20px rgba(41,92,171,.13);
}


/* =========================================================
   CARD TITLE
========================================================= */

.emi-box-title {

    margin-bottom: 32px;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;

    font-weight: 400;
}


/* =========================================================
   MAIN EMI
========================================================= */

.emi-amount {

    margin-bottom: 12px;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 38px;

    font-weight: 700;

    line-height: 1;
}


.emi-amount span {

    margin-left: 3px;

    font-size: 18px;

    font-weight: 400;
}


/* =========================================================
   LOAN DETAILS
========================================================= */

.emi-info {

    margin-bottom: 34px;

    color: rgba(255,255,255,.92);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    line-height: 1.4;
}


/* =========================================================
   BOTTOM VALUES
========================================================= */

.emi-bottom {

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 25px;
}


.emi-value {

    display: flex;

    flex-direction: column;

    min-width: 0;
}


.emi-value strong {

    margin-bottom: 6px;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 24px;

    font-weight: 700;

    line-height: 1;
}


.emi-value small {

    color: rgba(255,255,255,.90);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    line-height: 1.2;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .home-loan-emi-wrapper {

        max-width: 1120px;

        gap: 75px;
    }


    .home-loan-emi-box {

        flex-basis: 580px;

        width: 580px;

        min-height: 285px;

        padding:
            38px
            36px
            32px;
    }


    .home-loan-emi-left h2 {

        font-size: 35px;
    }

}


/* =========================================================
   DESKTOP 992 - 1199
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .home-loan-emi-wrapper {

        max-width: 1000px;

        gap: 45px;
    }


    .home-loan-emi-box {

        flex-basis: 520px;

        width: 520px;

        min-height: 265px;

        padding:
            32px
            30px
            28px;
    }


    .home-loan-emi-left h2 {

        font-size: 31px;
    }


    .emi-amount {

        font-size: 35px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .home-loan-emi-section {

        padding:
            40px
            25px
            55px;
    }


    .home-loan-emi-wrapper {

        gap: 30px;

        max-width: 900px;
    }


    .home-loan-emi-left h2 {

        font-size: 28px;
    }


    .home-loan-emi-left p {

        font-size: 13px;
    }


    .home-loan-emi-box {

        flex-basis: 450px;

        width: 450px;

        min-height: 250px;

        padding:
            29px
            25px
            26px;
    }


    .emi-box-title {

        font-size: 13px;

        margin-bottom: 27px;
    }


    .emi-amount {

        font-size: 30px;
    }


    .emi-amount span {

        font-size: 15px;
    }


    .emi-info {

        font-size: 10px;

        margin-bottom: 28px;
    }


    .emi-bottom {

        gap: 12px;
    }


    .emi-value strong {

        font-size: 19px;
    }


    .emi-value small {

        font-size: 10px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .home-loan-emi-section {

        padding:
            38px
            15px
            48px;
    }


    .home-loan-emi-wrapper {

        flex-direction: column;

        align-items: stretch;

        gap: 30px;
    }


    .home-loan-emi-left {

        width: 100%;

        text-align: center;
    }


    .home-loan-emi-left h2 {

        font-size: 27px;

        line-height: 1.2;

        letter-spacing: 0;
    }


    .home-loan-emi-left p {

        font-size: 13px;

        line-height: 1.45;
    }


    .home-loan-emi-btn {

        min-width: 205px;

        height: 46px;

        font-size: 13px;
    }


    /* LARGE CARD ON MOBILE */

    .home-loan-emi-box {

        width: 100%;

        min-width: 0;

        flex: none;

        min-height: 260px;

        padding:
            29px
            23px
            27px;

        border-radius: 15px;
    }


    .emi-box-title {

        font-size: 13px;

        margin-bottom: 27px;
    }


    .emi-amount {

        font-size: 30px;
    }


    .emi-amount span {

        font-size: 15px;
    }


    .emi-info {

        font-size: 10px;

        margin-bottom: 29px;
    }


    .emi-bottom {

        gap: 10px;
    }


    .emi-value strong {

        font-size: 18px;
    }


    .emi-value small {

        font-size: 10px;
    }

}


/* =========================================================
   IPHONE 376 - 575
========================================================= */

@media (min-width: 376px) and (max-width: 575px) {

    .home-loan-emi-section {

        padding:
            35px
            14px
            45px;
    }


    .home-loan-emi-wrapper {

        gap: 28px;
    }


    .home-loan-emi-left h2 {

        font-size: 25px;
    }


    .home-loan-emi-left p {

        font-size: 12px;
    }


    .home-loan-emi-box {

        min-height: 255px;

        padding:
            27px
            19px
            25px;
    }


    .emi-box-title {

        font-size: 12px;

        margin-bottom: 24px;
    }


    .emi-amount {

        font-size: 27px;
    }


    .emi-amount span {

        font-size: 14px;
    }


    .emi-info {

        font-size: 9px;

        margin-bottom: 26px;

        white-space: nowrap;
    }


    .emi-bottom {

        gap: 7px;
    }


    .emi-value strong {

        font-size: 17px;
    }


    .emi-value small {

        font-size: 9px;
    }

}


/* =========================================================
   IPHONE SE / SMALL MOBILE
========================================================= */

@media (max-width: 375px) {

    .home-loan-emi-section {

        padding:
            32px
            11px
            42px;
    }


    .home-loan-emi-wrapper {

        gap: 25px;
    }


    .home-loan-emi-left h2 {

        font-size: 23px;
    }


    .home-loan-emi-left p {

        font-size: 11px;

        line-height: 1.45;
    }


    .home-loan-emi-btn {

        min-width: 195px;

        height: 44px;

        font-size: 12px;
    }


    .home-loan-emi-box {

        min-height: 245px;

        padding:
            24px
            15px
            22px;

        border-radius: 13px;
    }


    .emi-box-title {

        font-size: 10px;

        margin-bottom: 21px;
    }


    .emi-amount {

        font-size: 23px;
    }


    .emi-amount span {

        font-size: 12px;
    }


    .emi-info {

        font-size: 8px;

        margin-bottom: 23px;

        white-space: nowrap;
    }


    .emi-bottom {

        gap: 4px;
    }


    .emi-value strong {

        font-size: 14px;
    }


    .emi-value small {

        font-size: 8px;
    }

}

/* 3nd section css */
/* 3rd section */
/* =========================================
   WHY CHOOSE OVERDRAFT
========================================= */

/* =========================================
   CARD GRID
========================================= */

.why-overdraft-grid {
    display: grid;

    grid-template-columns: repeat(6, minmax(0, 1fr));

    column-gap: 30px;
    row-gap: 30px;

    width: 100%;
}


/* =========================================
   FIRST ROW - 3 EQUAL CARDS
========================================= */

.why-overdraft-card:nth-child(1) {
    grid-column: 1 / span 2;
}

.why-overdraft-card:nth-child(2) {
    grid-column: 3 / span 2;
}

.why-overdraft-card:nth-child(3) {
    grid-column: 5 / span 2;
}


/* =========================================
   SECOND ROW - 3 EQUAL CARDS
========================================= */

.why-overdraft-card:nth-child(4) {
    grid-column: 1 / span 2;
}

.why-overdraft-card:nth-child(5) {
    grid-column: 3 / span 2;
}

.why-overdraft-card:nth-child(6) {
    grid-column: 5 / span 2;
}


/* =========================================
   CARD
========================================= */

.why-overdraft-card {
    width: 100%;
    min-width: 0;
    min-height: 260px;

    padding: 36px 28px;

    box-sizing: border-box;

    border: 1px solid #2f80ff;
    border-radius: 18px;

    background: #ffffff;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
/* =====================================================
   FINAL FIX - LRD 6 BENEFIT CARDS
===================================================== */

.why-overdraft-grid {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;

    display: grid !important;

    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 30px !important;

    box-sizing: border-box !important;
}


/* ALL 6 CARDS SAME WIDTH */

.why-overdraft-card,
.why-overdraft-card:nth-child(1),
.why-overdraft-card:nth-child(2),
.why-overdraft-card:nth-child(3),
.why-overdraft-card:nth-child(4),
.why-overdraft-card:nth-child(5),
.why-overdraft-card:nth-child(6) {

    grid-column: auto !important;

    width: 100% !important;
    min-width: 0 !important;

    min-height: 204px !important;

    box-sizing: border-box !important;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 991px) {

    .why-overdraft-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 25px !important;
    }

    .why-overdraft-card,
    .why-overdraft-card:nth-child(1),
    .why-overdraft-card:nth-child(2),
    .why-overdraft-card:nth-child(3),
    .why-overdraft-card:nth-child(4),
    .why-overdraft-card:nth-child(5),
    .why-overdraft-card:nth-child(6) {

        grid-column: auto !important;
        width: 100% !important;
    }
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

    .why-overdraft-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .why-overdraft-card,
    .why-overdraft-card:nth-child(1),
    .why-overdraft-card:nth-child(2),
    .why-overdraft-card:nth-child(3),
    .why-overdraft-card:nth-child(4),
    .why-overdraft-card:nth-child(5),
    .why-overdraft-card:nth-child(6) {

        grid-column: auto !important;

        width: 100% !important;

        min-height: auto !important;
    }
}

.why-overdraft-section {
    width: 100%;
    background: #ffffff;
    padding: 28px 20px 38px;
    font-family: Arial, Helvetica, sans-serif;
}

.why-overdraft-container {
    max-width: 1200px;
    margin: 0 auto;
}


/* =========================================
   HEADING
========================================= */

.why-overdraft-heading {
    text-align: center;
    margin-bottom: 43px;
}

.why-overdraft-heading h2 {
    margin: 0;

    font-size: 24px;
    line-height: 1.3;
    font-weight: 600;

    color: #333333;
}

.why-overdraft-subtitle {
    margin-top: 4px;

    font-size: 14px;
    line-height: 1.4;

    color: #2875e5;
}

.why-overdraft-heading p {
    max-width: 950px;

    margin: 12px auto 0;

    font-size: 14px;
    line-height: 1.25;

    color: #707070;
}


/* =========================================
   CARD GRID
========================================= */

.why-overdraft-grid {
    display: grid;

    grid-template-columns:
        repeat(6, 1fr);

    column-gap: 30px;
    row-gap: 30px;

    justify-items: stretch;
}


/* First 3 cards */

.why-overdraft-card:nth-child(1) {
    grid-column: span 2;
}

.why-overdraft-card:nth-child(2) {
    grid-column: span 2;
}

.why-overdraft-card:nth-child(3) {
    grid-column: span 2;
}


/* Bottom 2 cards */

.why-overdraft-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.why-overdraft-card:nth-child(5) {
    grid-column: 4 / span 2;
}


/* =========================================
   CARD
========================================= */

.why-overdraft-card {
    min-height: 204px;

    padding: 29px 22px;

    border: 1.5px solid #2875e5;

    border-radius: 15px;

    background: #ffffff;

    box-shadow:
        0 5px 12px rgba(40, 117, 229, 0.12);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.why-overdraft-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 8px 20px rgba(40, 117, 229, 0.18);
}


/* =========================================
   ICON
========================================= */

.why-overdraft-icon {
    width: 39px;
    height: 39px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #e7f0ff;

    border-radius: 4px;

    margin-bottom: 22px;
}

.why-overdraft-icon i {
    font-size: 19px;

    color: #2875e5;

    line-height: 1;
}


/* =========================================
   CARD TITLE
========================================= */

.why-overdraft-card h3 {
    margin: 0 0 7px;

    font-size: 21px;

    line-height: 1.25;

    font-weight: 600;

    color: #363636;
}


/* =========================================
   CARD DESCRIPTION
========================================= */

.why-overdraft-card p {
    margin: 0;

    font-size: 14px;

    line-height: 1.25;

    color: #707070;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .why-overdraft-section {
        padding: 35px 20px 50px;
    }

    .why-overdraft-heading h2 {
        font-size: 22px;
    }

    .why-overdraft-heading p {
        font-size: 13px;
    }

    .why-overdraft-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .why-overdraft-card:nth-child(1),
    .why-overdraft-card:nth-child(2),
    .why-overdraft-card:nth-child(3),
    .why-overdraft-card:nth-child(4),
    .why-overdraft-card:nth-child(5) {
        grid-column: auto;
    }

    .why-overdraft-card {
        min-height: 200px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .why-overdraft-section {
        padding: 35px 15px 45px;
    }

    .why-overdraft-heading {
        margin-bottom: 30px;
    }

    .why-overdraft-heading h2 {
        font-size: 20px;
    }

    .why-overdraft-subtitle {
        font-size: 13px;
    }

    .why-overdraft-heading p {
        font-size: 13px;
        line-height: 1.45;
    }

    .why-overdraft-grid {
        display: grid;

        grid-template-columns: 1fr;

        gap: 20px;
    }

    .why-overdraft-card:nth-child(1),
    .why-overdraft-card:nth-child(2),
    .why-overdraft-card:nth-child(3),
    .why-overdraft-card:nth-child(4),
    .why-overdraft-card:nth-child(5) {
        grid-column: auto;
    }

    .why-overdraft-card {
        min-height: auto;

        padding: 23px 20px;

        border-radius: 13px;
    }

    .why-overdraft-icon {
        margin-bottom: 17px;
    }

    .why-overdraft-card h3 {
        font-size: 19px;
    }

    .why-overdraft-card p {
        font-size: 13px;
    }

    .desktop-break {
        display: none;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .why-overdraft-heading h2 {
        font-size: 19px;
    }

    .why-overdraft-heading p {
        font-size: 12px;
    }

    .why-overdraft-card h3 {
        font-size: 18px;
    }

    .why-overdraft-card p {
        font-size: 12px;
    }
}

        


       

  

@media (max-width: 768px) {

    /* Main section */
    .jf-process {
        width: 100%;
        padding: 60px 15px !important;
        overflow: hidden;
    }

    .jf-process .jf-container {
        width: 100%;
        max-width: 100%;
        padding: 0 !important;
        margin: 0 auto;
    }


    /* -----------------------------------------
       SECTION HEADING
    ----------------------------------------- */

    .jf-process .jf-section-heading {
        width: 100%;
        max-width: 100%;
        margin: 0 auto 30px !important;
        padding: 0 5px;

        text-align: center;
    }

    .jf-process .eyebrow {
        display: block;

        margin: 0 0 9px !important;

        font-size: 11px !important;
        line-height: 1.4;

        letter-spacing: 1px;

        color: #00abe9 !important;
    }

    .jf-process .jf-section-heading h2 {
        width: 100%;

        margin: 0 0 10px !important;

        font-size: 28px !important;
        line-height: 1.25 !important;

        color: #fff;
    }

    .jf-process .jf-section-heading p {
        width: 100%;

        margin: 0 auto !important;

        font-size: 14px !important;
        line-height: 1.55 !important;

        color: rgba(255,255,255,0.72);
    }


    /* -----------------------------------------
       INTRO BOX
    ----------------------------------------- */

    .jf-process-intro {
        width: 100%;
        max-width: 100%;

        display: flex !important;

        align-items: flex-start !important;

        gap: 12px !important;

        margin: 0 auto 40px !important;

        padding: 18px !important;

        border-radius: 14px !important;

        box-sizing: border-box;
    }

    .jf-process-quote-icon {
        flex: 0 0 36px !important;

        width: 36px !important;
        height: 36px !important;

        font-size: 14px !important;

        background: #00abe9 !important;

        color: #fff !important;
    }

    .jf-process-intro p {
        width: auto;

        flex: 1;

        margin: 0 !important;

        font-size: 13px !important;
        line-height: 1.65 !important;

        text-align: left;

        color: rgba(255,255,255,0.82);
    }


    /* -----------------------------------------
       INFOGRAPHIC
    ----------------------------------------- */

    .jf-process-infographic {
        position: relative;

        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        gap: 0 !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    /* -----------------------------------------
       VERTICAL CONNECTING LINE
    ----------------------------------------- */

    .jf-process-line {
        display: block !important;

        position: absolute !important;

        top: 40px !important;
        bottom: 40px !important;

        left: 50% !important;
        right: auto !important;

        width: 2px !important;
        height: auto !important;

        transform: translateX(-50%) !important;

        background:
            linear-gradient(
                180deg,
                rgba(0,171,233,0.15),
                #00abe9,
                rgba(0,171,233,0.15)
            ) !important;

        z-index: 0 !important;
    }


    /* -----------------------------------------
       EACH STEP
    ----------------------------------------- */

    .jf-process-card {
        position: relative !important;

        z-index: 1 !important;

        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: flex-start !important;

        padding: 0 10px 45px !important;

        margin: 0 !important;

        text-align: center !important;

        box-sizing: border-box;
    }

    .jf-process-card:last-child {
        padding-bottom: 10px !important;
    }


    /* -----------------------------------------
       STEP ICON
    ----------------------------------------- */

    .jf-process-icon {
        position: relative !important;

        z-index: 2 !important;

        width: 82px !important;
        height: 82px !important;

        min-width: 82px !important;
        min-height: 82px !important;

        margin: 0 auto 10px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        border: 5px solid #00abe9 !important;

        border-radius: 50% !important;

        background: #fff !important;

        color: #07547d !important;

        font-size: 23px !important;

        box-shadow:
            0 8px 25px rgba(0,0,0,0.20);

        box-sizing: border-box;
    }


    /* -----------------------------------------
       STEP NUMBER
    ----------------------------------------- */

    .jf-process-number {
        position: relative !important;

        z-index: 3 !important;

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        min-width: 42px !important;
        height: 25px !important;

        margin: 0 auto 9px !important;

        padding: 0 9px !important;

        border-radius: 20px !important;

        background: #07547d !important;

        border: 1px solid #00abe9 !important;

        color: #00abe9 !important;

        font-size: 11px !important;
        font-weight: 800 !important;

        line-height: 1 !important;

        box-sizing: border-box;
    }


    /* -----------------------------------------
       STEP CONTENT
    ----------------------------------------- */

    .jf-process-card-content {
        position: relative;

        z-index: 2;

        width: 100% !important;

        max-width: 340px !important;

        margin: 0 auto !important;

        padding: 0 !important;

        text-align: center !important;
    }

    .jf-process-card-content h3 {
        width: 100%;

        margin: 0 0 8px !important;

        font-size: 17px !important;
        line-height: 1.4 !important;

        color: #fff !important;
    }

    .jf-process-card-content p {
        width: 100%;

        margin: 0 !important;

        font-size: 13px !important;
        line-height: 1.6 !important;

        color: rgba(255,255,255,0.67) !important;
    }


    /* -----------------------------------------
       FOOTNOTE
    ----------------------------------------- */

    .jf-process .jf-footnote {
        width: 100%;

        margin: 25px auto 0 !important;

        padding: 0 10px;

        text-align: center;

        font-size: 11px !important;
        line-height: 1.5;

        color: rgba(255,255,255,0.5) !important;
    }
}


/* =========================================================
   MOBILE 575px
========================================================= */

@media (max-width: 575px) {

    .jf-process {
        padding: 48px 14px !important;
    }


    /* Heading */

    .jf-process .jf-section-heading {
        margin-bottom: 25px !important;
        padding: 0 3px;
    }

    .jf-process .eyebrow {
        font-size: 10px !important;
        letter-spacing: 0.9px !important;
    }

    .jf-process .jf-section-heading h2 {
        font-size: 25px !important;
        line-height: 1.3 !important;
    }

    .jf-process .jf-section-heading p {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }


    /* Intro */

    .jf-process-intro {
        display: block !important;

        padding: 18px 16px !important;

        margin-bottom: 38px !important;

        text-align: center !important;
    }

    .jf-process-quote-icon {
        margin: 0 auto 12px !important;
    }

    .jf-process-intro p {
        font-size: 12.5px !important;
        line-height: 1.65 !important;

        text-align: center !important;
    }


    /* Steps */

    .jf-process-card {
        padding-left: 5px !important;
        padding-right: 5px !important;
        padding-bottom: 42px !important;
    }

    .jf-process-icon {
        width: 78px !important;
        height: 78px !important;

        min-width: 78px !important;
        min-height: 78px !important;

        border-width: 5px !important;

        font-size: 22px !important;
    }

    .jf-process-number {
        min-width: 40px !important;
        height: 24px !important;

        font-size: 10px !important;
    }

    .jf-process-card-content {
        max-width: 310px !important;
    }

    .jf-process-card-content h3 {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }

    .jf-process-card-content p {
        font-size: 12.5px !important;
        line-height: 1.6 !important;
    }

    .jf-process .jf-footnote {
        margin-top: 20px !important;

        font-size: 10.5px !important;
    }
}


/* =========================================================
   SMALL MOBILE 375px
========================================================= */

@media (max-width: 375px) {

    .jf-process {
        padding: 42px 12px !important;
    }


    .jf-process .jf-section-heading h2 {
        font-size: 23px !important;
    }

    .jf-process .jf-section-heading p {
        font-size: 12.5px !important;
    }


    .jf-process-intro {
        padding: 16px 13px !important;

        border-radius: 12px !important;
    }

    .jf-process-intro p {
        font-size: 12px !important;
    }


    .jf-process-card {
        padding-bottom: 38px !important;
    }


    .jf-process-icon {
        width: 74px !important;
        height: 74px !important;

        min-width: 74px !important;
        min-height: 74px !important;

        font-size: 20px !important;
    }


    .jf-process-number {
        min-width: 38px !important;
        height: 23px !important;

        font-size: 10px !important;
    }


    .jf-process-card-content {
        max-width: 290px !important;
    }


    .jf-process-card-content h3 {
        font-size: 15px !important;
    }

    .jf-process-card-content p {
        font-size: 12px !important;
    }


    .jf-process-line {
        top: 36px !important;
        bottom: 36px !important;
    }
}


/* =========================================================
   EXTRA SMALL 320px
========================================================= */

@media (max-width: 320px) {

    .jf-process {
        padding: 38px 10px !important;
    }


    .jf-process .jf-section-heading h2 {
        font-size: 21px !important;
    }


    .jf-process .jf-section-heading p {
        font-size: 12px !important;
    }


    .jf-process-intro {
        padding: 15px 12px !important;
    }

    .jf-process-intro p {
        font-size: 11.5px !important;
    }


    .jf-process-icon {
        width: 70px !important;
        height: 70px !important;

        min-width: 70px !important;
        min-height: 70px !important;

        font-size: 19px !important;
    }


    .jf-process-number {
        min-width: 36px !important;
        height: 22px !important;

        font-size: 9px !important;
    }


    .jf-process-card-content {
        max-width: 270px !important;
    }


    .jf-process-card-content h3 {
        font-size: 14px !important;
    }


    .jf-process-card-content p {
        font-size: 11.5px !important;
    }


    .jf-process-line {
        top: 34px !important;
        bottom: 34px !important;
    }

}
/* =========================================================
   HOME LOAN OVERVIEW - MOBILE RESPONSIVE
========================================================= */

@media (max-width: 768px) {

    /* Main Section */
    .home-section {
        width: 100% !important;

        display: block !important;

        padding: 50px 15px !important;

        margin: 0 !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    /* Container */
    .home-section .container-tab {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 auto !important;

        padding: 0 !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       HEADING
    ===================================================== */

    .home-section-header {
        width: 100% !important;

        display: block !important;

        margin: 0 auto 22px !important;

        padding: 0 !important;

        text-align: center !important;
    }


    .home-section-header .finserv-trusted {
        width: 100% !important;

        margin: 0 0 10px !important;

        padding: 0 !important;

        font-size: 26px !important;

        line-height: 1.3 !important;

        font-weight: 600 !important;

        text-align: center !important;

        word-break: normal !important;

        overflow-wrap: normal !important;
    }


    .home-section-subtitle {
        width: 100% !important;

        margin: 0 auto !important;

        padding: 0 5px !important;

        font-size: 13px !important;

        line-height: 1.55 !important;

        text-align: center !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       INTRO TEXT
    ===================================================== */

    .home-overview-intro {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 auto 28px !important;

        padding: 0 5px !important;

        font-size: 13px !important;

        line-height: 1.65 !important;

        text-align: center !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       FEATURE CARDS
       IMPORTANT: overrides inline grid-template-columns
    ===================================================== */

    .home-feature-cards {
        width: 100% !important;

        max-width: 100% !important;

        display: grid !important;

        grid-template-columns: 1fr !important;

        grid-template-rows: none !important;

        gap: 16px !important;

        margin: 0 !important;

        padding: 0 !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       INDIVIDUAL CARD
    ===================================================== */

    .home-feature-card {
        width: 100% !important;

        min-width: 0 !important;

        max-width: 100% !important;

        display: block !important;

        padding: 22px 18px !important;

        margin: 0 !important;

        text-align: center !important;

        border-radius: 14px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }


    /* =====================================================
       ICON
    ===================================================== */

    .home-feature-icon {
        width: 58px !important;

        height: 58px !important;

        min-width: 58px !important;

        margin: 0 auto 13px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        font-size: 27px !important;

        line-height: 1 !important;

        border-radius: 50% !important;
    }


    /* =====================================================
       CARD TITLE
    ===================================================== */

    .home-feature-title {
        width: 100% !important;

        margin: 0 0 8px !important;

        padding: 0 !important;

        font-size: 17px !important;

        line-height: 1.4 !important;

        text-align: center !important;

        word-break: normal !important;

        overflow-wrap: break-word !important;
    }


    /* =====================================================
       CARD DESCRIPTION
    ===================================================== */

    .home-feature-description {
        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        font-size: 13px !important;

        line-height: 1.6 !important;

        text-align: center !important;

        word-break: normal !important;

        overflow-wrap: break-word !important;
    }

}


/* =========================================================
   SMALL MOBILE - 575px
========================================================= */

@media (max-width: 575px) {

    .home-section {
        padding: 42px 14px !important;
    }


    .home-section-header {
        margin-bottom: 19px !important;
    }


    .home-section-header .finserv-trusted {
        font-size: 23px !important;

        line-height: 1.3 !important;
    }


    .home-section-subtitle {
        padding: 0 !important;

        font-size: 12.5px !important;

        line-height: 1.55 !important;
    }


    .home-overview-intro {
        padding: 0 2px !important;

        margin-bottom: 24px !important;

        font-size: 12.5px !important;

        line-height: 1.65 !important;
    }


    .home-feature-cards {
        grid-template-columns: 1fr !important;

        gap: 14px !important;
    }


    .home-feature-card {
        padding: 20px 16px !important;

        border-radius: 13px !important;
    }


    .home-feature-icon {
        width: 54px !important;

        height: 54px !important;

        min-width: 54px !important;

        margin-bottom: 11px !important;

        font-size: 25px !important;
    }


    .home-feature-title {
        font-size: 16px !important;

        line-height: 1.4 !important;
    }


    .home-feature-description {
        font-size: 12.5px !important;

        line-height: 1.6 !important;
    }

}


/* =========================================================
   VERY SMALL MOBILE - 375px
========================================================= */

@media (max-width: 375px) {

    .home-section {
        padding: 38px 12px !important;
    }


    .home-section-header .finserv-trusted {
        font-size: 21px !important;
    }


    .home-section-subtitle {
        font-size: 12px !important;
    }


    .home-overview-intro {
        font-size: 12px !important;

        line-height: 1.6 !important;
    }


    .home-feature-card {
        padding: 18px 14px !important;
    }


    .home-feature-icon {
        width: 50px !important;

        height: 50px !important;

        min-width: 50px !important;

        font-size: 23px !important;
    }


    .home-feature-title {
        font-size: 15px !important;
    }


    .home-feature-description {
        font-size: 11.5px !important;
    }

}


/* =========================================================
   EXTRA SMALL - 320px
========================================================= */

@media (max-width: 320px) {

    .home-section {
        padding: 34px 10px !important;
    }


    .home-section-header .finserv-trusted {
        font-size: 20px !important;
    }


    .home-section-subtitle {
        font-size: 11.5px !important;
    }


    .home-overview-intro {
        font-size: 11.5px !important;
    }


    .home-feature-cards {
        gap: 12px !important;
    }


    .home-feature-card {
        padding: 17px 12px !important;
    }


    .home-feature-icon {
        width: 48px !important;

        height: 48px !important;

        min-width: 48px !important;

        font-size: 21px !important;
    }


    .home-feature-title {
        font-size: 14px !important;
    }


    .home-feature-description {
        font-size: 11px !important;

        line-height: 1.55 !important;
    }

}



.home-loan-overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.45) 30%,
        rgba(0, 0, 0, 0.08) 65%,
        rgba(0, 0, 0, 0) 100%
    );

    z-index: 1;
}


/* =========================================================
   CONTAINER
========================================================= */

.home-loan-container {
    position: relative;
    z-index: 2;

    min-height: 525px;

    display: flex;
    align-items: center;
}


/* =========================================================
   CONTENT
========================================================= */

.home-loan-content {
    width: 50%;

    padding-left: 0;
    padding-top: 5px;
    padding-bottom: 5px;
}


/* =========================================================
   HEADING
========================================================= */

.home-loan-content h1 {
    margin: 0 0 8px 0;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 44px;
    line-height: 1.15;

    font-weight: 700;

    letter-spacing: 0;
}


.home-loan-content h1 span {
    color: #2f80ed;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.home-loan-content p {
    margin: 0 0 15px 0;

    color: rgba(255, 255, 255, 0.90);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;
    line-height: 1.5;

    font-weight: 400;
}


/* =========================================================
   APPLY NOW BUTTON
========================================================= */

.home-loan-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 86px;
    height: 35px;

    padding: 0 17px;

    background: #2878e5;

    color: #ffffff !important;

    border-radius: 4px;

    text-decoration: none !important;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;
    font-weight: 600;

    transition: all 0.3s ease;
}


.home-loan-btn:hover {
    background: #1265d2;

    color: #ffffff !important;

    transform: translateY(-1px);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.20);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .home-loan-hero {
        min-height: 525px;

        background-size: cover;

        background-position: center center;
    }


    .home-loan-container {
        min-height: 525px;
    }


    .home-loan-content {
        width: 50%;
    }


    .home-loan-content h1 {
        font-size: 44px;
    }


    .home-loan-content p {
        font-size: 15px;
    }
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .home-loan-hero {
        min-height: 450px;

        background-size: cover;

        background-position: center center;
    }


    .home-loan-container {
        min-height: 450px;
    }


    .home-loan-content {
        width: 50%;
    }


    .home-loan-content h1 {
        font-size: 36px;
    }


    .home-loan-content p {
        font-size: 14px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .home-loan-hero {

        min-height: 360px;

        /*
         * Keep the complete image visible better
         */
        background-size: 100% 100%;

        background-position: center center;

        background-repeat: no-repeat;
    }


    .home-loan-container {

        min-height: 360px;

        display: flex;

        align-items: center;

        padding-left: 30px;
        padding-right: 30px;

        box-sizing: border-box;
    }


    .home-loan-content {

        width: 52%;

        padding: 0;
    }


    .home-loan-content h1 {

        font-size: 29px;

        line-height: 1.18;

        margin-bottom: 9px;
    }


    .home-loan-content p {

        font-size: 12px;

        line-height: 1.45;

        margin-bottom: 15px;
    }


    .home-loan-btn {

        height: 35px;

        min-width: 86px;

        padding: 0 15px;

        font-size: 12px;
    }


    .home-loan-overlay {

        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.68) 0%,
            rgba(0, 0, 0, 0.43) 40%,
            rgba(0, 0, 0, 0.10) 75%,
            rgba(0, 0, 0, 0) 100%
        );
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .home-loan-hero {

        min-height: 300px;

        /*
         * IMPORTANT:
         * Cover was cropping the family image.
         * 100% 100% keeps the whole banner visible.
         */
        background-size: 100% 100%;

        background-position: center center;

        background-repeat: no-repeat;
    }


    .home-loan-container {

        min-height: 300px;

        width: 100%;

        display: flex;

        align-items: center;

        padding-top: 30px;
        padding-bottom: 30px;
        padding-left: 22px;
        padding-right: 22px;

        box-sizing: border-box;
    }


    .home-loan-content {

        width: 58%;

        padding: 0;
    }


    .home-loan-content h1 {

        font-size: 22px;

        line-height: 1.18;

        margin: 0 0 9px 0;
    }


    .home-loan-content p {

        font-size: 11px;

        line-height: 1.5;

        margin: 0 0 15px 0;
    }


    .home-loan-btn {

        height: 34px;

        min-width: 82px;

        padding: 0 15px;

        font-size: 11px;

        border-radius: 4px;
    }


    .home-loan-overlay {

        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.50) 42%,
            rgba(0, 0, 0, 0.12) 78%,
            rgba(0, 0, 0, 0.02) 100%
        );
    }
}


/* =========================================================
   IPHONE / SMALL MOBILE
========================================================= */

@media (max-width: 575px) {

    .home-loan-hero {

        min-height: 270px;

        /*
         * Full banner image visible
         */
        background-size: 100% 100%;

        background-position: center center;

        background-repeat: no-repeat;
    }


    .home-loan-container {

        min-height: 270px;

        padding-top: 25px;
        padding-bottom: 25px;
        padding-left: 18px;
        padding-right: 18px;

        align-items: center;
    }


    .home-loan-content {

        width: 58%;

        max-width: 230px;

        padding: 0;
    }


    .home-loan-content h1 {

        font-size: 20px;

        line-height: 1.18;

        margin-bottom: 8px;
    }


    .home-loan-content p {

        font-size: 10px;

        line-height: 1.45;

        margin-bottom: 13px;
    }


    .home-loan-btn {

        height: 33px;

        min-width: 82px;

        padding: 0 14px;

        font-size: 10px;
    }


    .home-loan-overlay {

        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.70) 0%,
            rgba(0, 0, 0, 0.48) 43%,
            rgba(0, 0, 0, 0.15) 75%,
            rgba(0, 0, 0, 0.02) 100%
        );
    }
}


/* =========================================================
   IPHONE SE / 375px
========================================================= */

@media (max-width: 375px) {

    .home-loan-hero {

        min-height: 245px;

        background-size: 100% 100%;

        background-position: center center;
    }


    .home-loan-container {

        min-height: 245px;

        padding-top: 22px;
        padding-bottom: 22px;
        padding-left: 15px;
        padding-right: 15px;
    }


    .home-loan-content {

        width: 58%;

        max-width: 210px;
    }


    .home-loan-content h1 {

        font-size: 18px;

        line-height: 1.17;

        margin-bottom: 7px;
    }


    .home-loan-content p {

        font-size: 9px;

        line-height: 1.4;

        margin-bottom: 12px;
    }


    .home-loan-btn {

        height: 31px;

        min-width: 78px;

        padding: 0 12px;

        font-size: 9px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .home-loan-hero {

        min-height: 230px;

        background-size: 100% 100%;

        background-position: center center;
    }


    .home-loan-container {

        min-height: 230px;

        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 13px;
        padding-right: 13px;
    }


    .home-loan-content {

        width: 58%;

        max-width: 195px;
    }


    .home-loan-content h1 {

        font-size: 17px;

        line-height: 1.17;
    }


    .home-loan-content p {

        font-size: 8.5px;

        line-height: 1.4;
    }


    .home-loan-btn {

        height: 30px;

        min-width: 75px;

        padding: 0 11px;

        font-size: 9px;
    }
}


/* =========================================================
   EXTRA SMALL DEVICES
========================================================= */

@media (max-width: 320px) {

    .home-loan-hero {

        min-height: 215px;

        background-size: 100% 100%;
    }


    .home-loan-container {

        min-height: 215px;

        padding-left: 12px;
        padding-right: 12px;
    }


    .home-loan-content {

        width: 57%;
    }


    .home-loan-content h1 {

        font-size: 16px;
    }


    .home-loan-content p {

        font-size: 8px;
    }


    .home-loan-btn {

        height: 29px;

        min-width: 72px;

        font-size: 8px;
    }
}

/* our feature section */



/* =========================================================
   MAIN SECTION
========================================================= */

.home-loan-features {
    width: 100%;

    background: #ffffff;

    padding: 75px 20px 80px;

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.home-loan-features-container {
    width: 100%;

    max-width: 1200px;

    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.home-loan-features-header {
    width: 100%;

    text-align: center;

    margin: 0 auto 45px;
}


/* SMALL TITLE */

.home-loan-eyebrow {
    margin-bottom: 8px;

    color: #2878e5;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.4;
}


/* MAIN TITLE */

.home-loan-features-header h2 {
    margin: 0 0 24px;

    color: #333333;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 32px;

    font-weight: 600;

    line-height: 1.25;
}


/* BLUE DREAM */

.home-loan-features-header h2 span {
    color: #00a9e8;

    font-weight: 700;
}


/* DESCRIPTION */

.home-loan-features-header p {
    max-width: 1100px;

    margin: 0 auto;

    color: #666666;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;

    font-weight: 400;

    line-height: 1.55;

    text-align: center;
}


/* =========================================================
   FEATURES WRAPPER
========================================================= */

.home-loan-features-wrapper {
    width: 100%;

    display: grid;

    grid-template-columns: 1fr 330px 1fr;

    column-gap: 40px;

    align-items: center;
}


/* =========================================================
   FEATURE COLUMNS
========================================================= */

.home-loan-feature-column {
    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 65px;
}


/* =========================================================
   FEATURE ITEM
========================================================= */

.home-loan-feature-item {
    width: 100%;

    display: flex;

    align-items: center;

    gap: 12px;
}


/* =========================================================
   ICON BOX
========================================================= */

.home-loan-feature-icon {
    flex: 0 0 36px;

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #eaf3ff;

    border-radius: 7px;

    color: #2878e5;

    font-size: 17px;
}


/* =========================================================
   FEATURE TEXT
========================================================= */

.home-loan-feature-text {
    flex: 1;

    min-width: 0;
}


.home-loan-feature-text h4 {
    margin: 0;

    color: #222222;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.3;
}


/* =========================================================
   CENTER
========================================================= */

.home-loan-center {
    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;
}


/* =========================================================
   HOUSE IMAGE
========================================================= */

.home-loan-house {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 30px;
}


.home-loan-house img {
    display: block;

    width: 100%;

    max-width: 340px;

    height: auto;

    object-fit: contain;
}


/* =========================================================
   APPLY BUTTON
========================================================= */

.home-loan-feature-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 157px;

    height: 46px;

    background: #2878e5;

    color: #ffffff !important;

    border-radius: 6px;

    text-decoration: none !important;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    font-weight: 600;

    transition: all 0.3s ease;
}


.home-loan-feature-btn:hover {
    background: #1265d2;

    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow: 0 5px 15px rgba(40, 120, 229, 0.25);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .home-loan-features {
        padding-top: 80px;

        padding-bottom: 90px;
    }


    .home-loan-features-container {
        max-width: 1250px;
    }


    .home-loan-features-header h2 {
        font-size: 34px;
    }


    .home-loan-features-header p {
        font-size: 15px;

        max-width: 1120px;
    }


    .home-loan-features-wrapper {
        grid-template-columns: 1fr 350px 1fr;

        column-gap: 45px;
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .home-loan-features {
        padding: 65px 25px 75px;
    }


    .home-loan-features-wrapper {
        grid-template-columns: 1fr 290px 1fr;

        column-gap: 30px;
    }


    .home-loan-feature-column {
        gap: 55px;
    }


    .home-loan-feature-text h4 {
        font-size: 13px;
    }


    .home-loan-house img {
        max-width: 290px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .home-loan-features {
        padding: 60px 25px 70px;
    }


    .home-loan-features-header {
        margin-bottom: 40px;
    }


    .home-loan-features-header h2 {
        font-size: 29px;

        margin-bottom: 20px;
    }


    .home-loan-features-header p {
        font-size: 14px;
    }


    .home-loan-features-wrapper {
        grid-template-columns: 1fr 230px 1fr;

        column-gap: 20px;
    }


    .home-loan-feature-column {
        gap: 55px;
    }


    .home-loan-feature-item {
        gap: 9px;
    }


    .home-loan-feature-icon {
        flex-basis: 34px;

        width: 34px;

        height: 34px;

        font-size: 15px;
    }


    .home-loan-feature-text h4 {
        font-size: 12px;
    }


    .home-loan-house img {
        max-width: 230px;
    }


    .home-loan-feature-btn {
        width: 140px;

        height: 43px;

        font-size: 13px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .home-loan-features {
        padding: 55px 20px 65px;
    }


    .home-loan-features-header {
        margin-bottom: 35px;
    }


    .home-loan-eyebrow {
        font-size: 14px;

        margin-bottom: 7px;
    }


    .home-loan-features-header h2 {
        font-size: 27px;

        line-height: 1.25;

        margin-bottom: 18px;
    }


    .home-loan-features-header p {
        font-size: 13px;

        line-height: 1.55;

        text-align: center;
    }


    /* =========================================
       MOBILE LAYOUT
    ========================================= */

    .home-loan-features-wrapper {
        display: flex;

        flex-direction: column;

        width: 100%;

        gap: 0;
    }


    /* CENTER IMAGE FIRST */

    .home-loan-center {
        order: 1;

        width: 100%;

        margin: 5px 0 35px;
    }


    .home-loan-house {
        margin-bottom: 25px;
    }


    .home-loan-house img {
        width: 85%;

        max-width: 330px;
    }


    .home-loan-feature-btn {
        width: 145px;

        height: 44px;

        font-size: 13px;
    }


    /* LEFT FEATURES */

    .home-loan-left-column {
        order: 2;
    }


    /* RIGHT FEATURES */

    .home-loan-right-column {
        order: 3;
    }


    .home-loan-feature-column {
        width: 100%;

        gap: 22px;

        margin-bottom: 22px;
    }


    .home-loan-feature-item {
        width: 100%;

        align-items: flex-start;

        gap: 12px;

        padding: 5px 0;
    }


    .home-loan-feature-icon {
        flex: 0 0 38px;

        width: 38px;

        height: 38px;

        font-size: 16px;
    }


    .home-loan-feature-text h4 {
        font-size: 13px;

        line-height: 1.4;
    }

}


/* =========================================================
   IPHONE 376 - 575
========================================================= */

@media (min-width: 376px) and (max-width: 575px) {

    .home-loan-features {
        padding:
            48px
            18px
            55px;
    }


    .home-loan-eyebrow {
        font-size: 13px;
    }


    .home-loan-features-header h2 {
        font-size: 24px;
    }


    .home-loan-features-header p {
        font-size: 12px;

        line-height: 1.55;
    }


    .home-loan-house img {
        width: 90%;

        max-width: 320px;
    }


    .home-loan-feature-column {
        gap: 18px;
    }


    .home-loan-feature-item {
        gap: 10px;
    }


    .home-loan-feature-icon {
        flex: 0 0 36px;

        width: 36px;

        height: 36px;

        font-size: 15px;
    }


    .home-loan-feature-text h4 {
        font-size: 12px;

        line-height: 1.4;
    }


    .home-loan-feature-btn {
        width: 140px;

        height: 42px;

        font-size: 12px;
    }

}


/* =========================================================
   IPHONE SE / 375px AND BELOW
========================================================= */

@media (max-width: 375px) {

    .home-loan-features {
        padding:
            42px
            15px
            50px;
    }


    .home-loan-eyebrow {
        font-size: 12px;
    }


    .home-loan-features-header h2 {
        font-size: 22px;

        margin-bottom: 15px;
    }


    .home-loan-features-header p {
        font-size: 11px;

        line-height: 1.55;
    }


    .home-loan-center {
        margin-bottom: 30px;
    }


    .home-loan-house {
        margin-bottom: 22px;
    }


    .home-loan-house img {
        width: 94%;

        max-width: 300px;
    }


    .home-loan-feature-column {
        gap: 16px;

        margin-bottom: 18px;
    }


    .home-loan-feature-item {
        gap: 9px;
    }


    .home-loan-feature-icon {
        flex: 0 0 34px;

        width: 34px;

        height: 34px;

        font-size: 14px;

        border-radius: 6px;
    }


    .home-loan-feature-text h4 {
        font-size: 11.5px;

        line-height: 1.4;
    }


    .home-loan-feature-btn {
        width: 135px;

        height: 40px;

        font-size: 11.5px;
    }

}


/* =========================================================
   VERY SMALL 320px
========================================================= */

@media (max-width: 320px) {

    .home-loan-features {
        padding-left: 12px;

        padding-right: 12px;
    }


    .home-loan-features-header h2 {
        font-size: 20px;
    }


    .home-loan-features-header p {
        font-size: 10.5px;
    }


    .home-loan-house img {
        width: 96%;
    }


    .home-loan-feature-text h4 {
        font-size: 11px;
    }

}


/* =========================================================
   SAFETY
========================================================= */

.home-loan-features img {
    max-width: 100%;
}



/* =========================================================
   MAIN SECTION
========================================================= */

.why-home-loan-section {
    width: 100%;

    background: #dce9fe;

    padding: 35px 25px 80px;

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.why-home-loan-container {
    width: 100%;

    max-width: 1200px;

    margin: 0 auto;
}


/* =========================================================
   TOP HEADER
========================================================= */

.why-home-loan-header {
    width: 100%;

    text-align: center;

    margin-bottom: 43px;
}


/* MAIN HEADING */

.why-home-loan-header h2 {
    margin: 0 0 4px;

    color: #333333;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 24px;

    font-weight: 600;

    line-height: 1.3;
}


/* BLUE SUBTITLE */

.why-home-loan-subtitle {
    margin-bottom: 14px;

    color: #2878e5;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.4;
}


/* DESCRIPTION */

.why-home-loan-header p {
    margin: 0 auto;

    max-width: 1050px;

    color: #666666;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.35;

    text-align: center;
}


/* =========================================================
   CARD GRID
========================================================= */

.home-loan-card-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 30px;

    align-items: stretch;
}


/* =========================================================
   CARD
========================================================= */

.home-loan-info-card {
    width: 100%;

    min-height: 205px;

    padding: 29px 22px 25px;

    background: #ffffff;

    border: 1px solid #286fff;

    border-radius: 15px;

    box-shadow:
        0 7px 18px rgba(40, 111, 255, 0.08);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* CARD HOVER */

.home-loan-info-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(40, 111, 255, 0.13);
}


/* =========================================================
   ICON BOX
========================================================= */

.home-loan-card-icon {
    width: 39px;

    height: 39px;

    margin-bottom: 23px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e8f1ff;

    border-radius: 4px;

    color: #2878e5;

    font-size: 18px;
}


/* =========================================================
   CARD TITLE
========================================================= */

.home-loan-info-card h3 {
    margin: 0 0 7px;

    color: #363636;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 21px;

    font-weight: 600;

    line-height: 1.25;
}


/* =========================================================
   CARD DESCRIPTION
========================================================= */

.home-loan-info-card p {
    margin: 0;

    color: #666666;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.3;
}


/* =========================================================
   BENEFITS HEADER
========================================================= */

.home-loan-benefits-header {
    width: 100%;

    text-align: center;

    margin-top: 78px;

    margin-bottom: 44px;
}


.home-loan-benefits-header h2 {
    margin: 0 0 7px;

    color: #333333;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 24px;

    font-weight: 600;

    line-height: 1.3;
}


.home-loan-benefits-header p {
    margin: 0;

    color: #666666;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.4;
}


/* =========================================================
   BENEFITS GRID
========================================================= */

.benefits-grid {
    margin-bottom: 0;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .why-home-loan-container {
        max-width: 1200px;
    }


    .why-home-loan-section {
        padding-top: 35px;
    }


    .home-loan-info-card {
        min-height: 205px;
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .why-home-loan-section {
        padding-left: 25px;
        padding-right: 25px;
    }


    .home-loan-card-grid {
        gap: 25px;
    }


    .home-loan-info-card {
        padding: 27px 20px 24px;
    }


    .home-loan-info-card h3 {
        font-size: 19px;
    }


    .home-loan-info-card p {
        font-size: 13px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .why-home-loan-section {
        padding:
            35px
            20px
            65px;
    }


    .why-home-loan-header {
        margin-bottom: 35px;
    }


    .why-home-loan-header h2 {
        font-size: 23px;
    }


    .why-home-loan-subtitle {
        font-size: 13px;
    }


    .why-home-loan-header p {
        font-size: 12px;
    }


    .home-loan-card-grid {
        gap: 18px;
    }


    .home-loan-info-card {
        min-height: 195px;

        padding: 25px 18px;
    }


    .home-loan-card-icon {
        width: 37px;

        height: 37px;

        margin-bottom: 20px;
    }


    .home-loan-info-card h3 {
        font-size: 17px;
    }


    .home-loan-info-card p {
        font-size: 12px;
    }


    .home-loan-benefits-header {
        margin-top: 65px;

        margin-bottom: 35px;
    }


    .home-loan-benefits-header h2 {
        font-size: 23px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .why-home-loan-section {
        padding:
            45px
            18px
            60px;
    }


    .why-home-loan-header {
        margin-bottom: 30px;
    }


    .why-home-loan-header h2 {
        font-size: 22px;

        line-height: 1.3;
    }


    .why-home-loan-subtitle {
        margin-top: 5px;

        margin-bottom: 13px;

        font-size: 12px;

        line-height: 1.45;
    }


    .why-home-loan-header p {
        max-width: 500px;

        font-size: 11.5px;

        line-height: 1.5;
    }


    /* REMOVE BR ON MOBILE */

    .desktop-break {
        display: none;
    }


    /* ONE CARD PER ROW */

    .home-loan-card-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    /* CARD */

    .home-loan-info-card {
        min-height: 0;

        padding:
            23px
            20px
            22px;

        border-radius: 13px;
    }


    /* ICON */

    .home-loan-card-icon {
        width: 38px;

        height: 38px;

        margin-bottom: 18px;

        font-size: 17px;
    }


    /* TITLE */

    .home-loan-info-card h3 {
        font-size: 18px;

        line-height: 1.3;

        margin-bottom: 8px;
    }


    /* DESCRIPTION */

    .home-loan-info-card p {
        font-size: 12px;

        line-height: 1.45;
    }


    /* BENEFITS */

    .home-loan-benefits-header {
        margin-top: 58px;

        margin-bottom: 30px;
    }


    .home-loan-benefits-header h2 {
        font-size: 22px;

        line-height: 1.3;
    }


    .home-loan-benefits-header p {
        font-size: 11.5px;

        line-height: 1.45;
    }

}


/* =========================================================
   IPHONE 376 - 575
========================================================= */

@media (min-width: 376px) and (max-width: 575px) {

    .why-home-loan-section {
        padding:
            42px
            17px
            55px;
    }


    .why-home-loan-header h2 {
        font-size: 21px;
    }


    .why-home-loan-subtitle {
        font-size: 11.5px;
    }


    .why-home-loan-header p {
        font-size: 11px;
    }


    .home-loan-card-grid {
        gap: 16px;
    }


    .home-loan-info-card {
        padding:
            22px
            18px
            21px;
    }


    .home-loan-card-icon {
        width: 37px;

        height: 37px;

        margin-bottom: 17px;

        font-size: 16px;
    }


    .home-loan-info-card h3 {
        font-size: 17px;
    }


    .home-loan-info-card p {
        font-size: 11.5px;
    }


    .home-loan-benefits-header {
        margin-top: 52px;
    }


    .home-loan-benefits-header h2 {
        font-size: 21px;
    }

}


/* =========================================================
   IPHONE SE / 375px
========================================================= */

@media (max-width: 375px) {

    .why-home-loan-section {
        padding:
            38px
            14px
            50px;
    }


    .why-home-loan-header {
        margin-bottom: 26px;
    }


    .why-home-loan-header h2 {
        font-size: 20px;
    }


    .why-home-loan-subtitle {
        font-size: 11px;
    }


    .why-home-loan-header p {
        font-size: 10.5px;

        line-height: 1.5;
    }


    .home-loan-card-grid {
        gap: 15px;
    }


    .home-loan-info-card {
        padding:
            20px
            16px
            20px;

        border-radius: 12px;
    }


    .home-loan-card-icon {
        width: 35px;

        height: 35px;

        margin-bottom: 16px;

        font-size: 15px;
    }


    .home-loan-info-card h3 {
        font-size: 16px;

        line-height: 1.3;
    }


    .home-loan-info-card p {
        font-size: 11px;

        line-height: 1.45;
    }


    .home-loan-benefits-header {
        margin-top: 48px;

        margin-bottom: 26px;
    }


    .home-loan-benefits-header h2 {
        font-size: 20px;
    }


    .home-loan-benefits-header p {
        font-size: 10.5px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 320px) {

    .why-home-loan-section {
        padding-left: 12px;

        padding-right: 12px;
    }


    .why-home-loan-header h2 {
        font-size: 19px;
    }


    .why-home-loan-subtitle {
        font-size: 10.5px;
    }


    .why-home-loan-header p {
        font-size: 10px;
    }


    .home-loan-info-card h3 {
        font-size: 15px;
    }


    .home-loan-info-card p {
        font-size: 10.5px;
    }

}



/* =========================================================
   MAIN SECTION
========================================================= */

.jfin-home-benefits-section {

    width: 100%;

    background: #ffffff;

    padding: 30px 24px 60px;

    overflow: hidden;
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.jfin-home-benefits-container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.jfin-home-benefits-header {

    width: 100%;

    text-align: center;

    margin-bottom: 42px;
}


/* =========================================================
   HEADING
========================================================= */

.jfin-home-benefits-header h2 {

    margin: 0 0 7px;

    color: #295cab;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 25px;

    font-weight: 600;

    line-height: 1.25;
}


/* CYAN PART */

.jfin-home-benefits-header h2 strong {

    color: #00abeb;

    font-weight: 700;
}


/* =========================================================
   SUBTEXT
========================================================= */

.jfin-home-benefits-header p {

    margin: 0;

    color: #666666;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.4;
}


/* =========================================================
   CARD GRID
========================================================= */

.jfin-home-benefits-grid {

    width: 100%;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    column-gap: 30px;

    row-gap: 30px;
}


/* =========================================================
   CARD
========================================================= */

.jfin-benefit-card {

    width: 100%;

    min-height: 205px;

    padding: 29px 22px 24px;

    background: #ffffff;

    border: 1px solid #286fff;

    border-radius: 15px;

    box-sizing: border-box;

    box-shadow:
        0 5px 15px rgba(41, 92, 171, 0.04);

    transition: all 0.25s ease;
}


/* =========================================================
   CARD HOVER
========================================================= */

.jfin-benefit-card:hover {

    transform: translateY(-3px);

    box-shadow:
        0 9px 22px rgba(41, 92, 171, 0.10);
}


/* =========================================================
   ICON BOX
========================================================= */

.jfin-benefit-icon {

    width: 39px;

    height: 39px;

    margin-bottom: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e6f0ff;

    border-radius: 4px;

    color: #2878e5;

    font-size: 18px;
}


/* =========================================================
   CARD TITLE
========================================================= */

.jfin-benefit-card h3 {

    margin: 0 0 7px;

    color: #363636;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 21px;

    font-weight: 600;

    line-height: 1.25;
}


/* =========================================================
   CARD DESCRIPTION
========================================================= */

.jfin-benefit-card p {

    margin: 0;

    color: #666666;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.3;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .jfin-home-benefits-container {

        max-width: 1200px;
    }


    .jfin-home-benefits-section {

        padding-top: 30px;

        padding-bottom: 65px;
    }


    .jfin-benefit-card {

        min-height: 205px;
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .jfin-home-benefits-section {

        padding-left: 25px;

        padding-right: 25px;
    }


    .jfin-home-benefits-grid {

        gap: 25px;
    }


    .jfin-benefit-card {

        padding: 27px 20px 24px;

        min-height: 205px;
    }


    .jfin-benefit-card h3 {

        font-size: 19px;
    }


    .jfin-benefit-card p {

        font-size: 13px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .jfin-home-benefits-section {

        padding:
            30px
            20px
            55px;
    }


    .jfin-home-benefits-header {

        margin-bottom: 35px;
    }


    .jfin-home-benefits-header h2 {

        font-size: 23px;
    }


    .jfin-home-benefits-header p {

        font-size: 12px;
    }


    .jfin-home-benefits-grid {

        column-gap: 18px;

        row-gap: 20px;
    }


    .jfin-benefit-card {

        min-height: 195px;

        padding:
            24px
            18px
            22px;

        border-radius: 13px;
    }


    .jfin-benefit-icon {

        width: 37px;

        height: 37px;

        margin-bottom: 19px;

        font-size: 16px;
    }


    .jfin-benefit-card h3 {

        font-size: 17px;

        line-height: 1.3;
    }


    .jfin-benefit-card p {

        font-size: 12px;

        line-height: 1.4;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .jfin-home-benefits-section {

        padding:
            42px
            18px
            55px;
    }


    .jfin-home-benefits-header {

        margin-bottom: 30px;
    }


    .jfin-home-benefits-header h2 {

        font-size: 22px;

        line-height: 1.3;
    }


    .jfin-home-benefits-header p {

        font-size: 11.5px;

        line-height: 1.5;
    }


    /* =====================================================
       ONE CARD PER ROW
    ===================================================== */

    .jfin-home-benefits-grid {

        display: grid;

        grid-template-columns: 1fr;

        gap: 17px;
    }


    /* =====================================================
       CARD
    ===================================================== */

    .jfin-benefit-card {

        min-height: auto;

        padding:
            23px
            20px
            23px;

        border-radius: 13px;
    }


    /* =====================================================
       ICON
    ===================================================== */

    .jfin-benefit-icon {

        width: 38px;

        height: 38px;

        margin-bottom: 17px;

        font-size: 17px;
    }


    /* =====================================================
       TITLE
    ===================================================== */

    .jfin-benefit-card h3 {

        font-size: 18px;

        line-height: 1.3;

        margin-bottom: 8px;
    }


    /* =====================================================
       DESCRIPTION
    ===================================================== */

    .jfin-benefit-card p {

        font-size: 12px;

        line-height: 1.5;
    }


    .jfin-desktop-only {

        display: none;
    }

}


/* =========================================================
   IPHONE 376px - 575px
========================================================= */

@media (min-width: 376px) and (max-width: 575px) {

    .jfin-home-benefits-section {

        padding:
            40px
            17px
            50px;
    }


    .jfin-home-benefits-header {

        margin-bottom: 27px;
    }


    .jfin-home-benefits-header h2 {

        font-size: 21px;
    }


    .jfin-home-benefits-header p {

        font-size: 11px;
    }


    .jfin-home-benefits-grid {

        gap: 15px;
    }


    .jfin-benefit-card {

        padding:
            21px
            18px
            21px;
    }


    .jfin-benefit-icon {

        width: 37px;

        height: 37px;

        margin-bottom: 16px;

        font-size: 16px;
    }


    .jfin-benefit-card h3 {

        font-size: 17px;
    }


    .jfin-benefit-card p {

        font-size: 11.5px;

        line-height: 1.5;
    }

}


/* =========================================================
   IPHONE SE / 375px
========================================================= */

@media (max-width: 375px) {

    .jfin-home-benefits-section {

        padding:
            36px
            14px
            48px;
    }


    .jfin-home-benefits-header {

        margin-bottom: 25px;
    }


    .jfin-home-benefits-header h2 {

        font-size: 20px;
    }


    .jfin-home-benefits-header p {

        font-size: 10.5px;

        line-height: 1.5;
    }


    .jfin-home-benefits-grid {

        gap: 14px;
    }


    .jfin-benefit-card {

        padding:
            20px
            16px
            20px;

        border-radius: 12px;
    }


    .jfin-benefit-icon {

        width: 35px;

        height: 35px;

        margin-bottom: 15px;

        font-size: 15px;
    }


    .jfin-benefit-card h3 {

        font-size: 16px;

        line-height: 1.3;
    }


    .jfin-benefit-card p {

        font-size: 11px;

        line-height: 1.5;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 320px) {

    .jfin-home-benefits-section {

        padding-left: 12px;

        padding-right: 12px;
    }


    .jfin-home-benefits-header h2 {

        font-size: 19px;
    }


    .jfin-home-benefits-header p {

        font-size: 10px;
    }


    .jfin-benefit-card h3 {

        font-size: 15px;
    }


    .jfin-benefit-card p {

        font-size: 10.5px;
    }

}




/* =========================================================
   MAIN SECTION
========================================================= */

.home-loan-emi-section {

    width: 100%;

    background: #edf4fd;

    padding: 45px 25px 60px;

    box-sizing: border-box;

    overflow: hidden;
}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.home-loan-emi-wrapper {

    width: 100%;

    max-width: 1120px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 70px;

    box-sizing: border-box;
}


/* =========================================================
   LEFT SIDE
========================================================= */

.home-loan-emi-left {

    flex: 1;

    min-width: 0;
}


.home-loan-emi-left h2 {

    margin: 0 0 12px;

    color: #333333;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 34px;

    font-weight: 600;

    line-height: 1.15;

    letter-spacing: -0.5px;
}


.home-loan-emi-left p {

    margin: 0 0 22px;

    color: #707070;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    line-height: 1.4;
}


/* =========================================================
   BUTTON
========================================================= */

.home-loan-emi-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    min-width: 215px;

    height: 48px;

    padding: 0 22px;

    background: #2878e5;

    color: #ffffff !important;

    border-radius: 7px;

    text-decoration: none !important;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    font-weight: 600;

    box-sizing: border-box;

    transition:
        all .25s ease;
}


.home-loan-emi-btn:hover {

    background: #1d66cc;

    color: #ffffff !important;

    transform: translateY(-1px);

    box-shadow:
        0 5px 14px rgba(40,120,229,.20);
}


.home-loan-emi-btn span {

    font-size: 23px;

    line-height: 1;
}


/* =========================================================
   RIGHT EMI CARD - LARGE
========================================================= */

.home-loan-emi-box {

    flex: 0 0 560px;

    width: 560px;

    min-height: 275px;

    padding: 36px 34px 30px;

    box-sizing: border-box;

    border-radius: 17px;

    background:
        linear-gradient(
            115deg,
            #2878e5 0%,
            #493ddd 48%,
            #b500d9 100%
        );

    color: #ffffff;

    box-shadow:
        0 7px 20px rgba(41,92,171,.13);
}


/* =========================================================
   CARD TITLE
========================================================= */

.emi-box-title {

    margin-bottom: 32px;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;

    font-weight: 400;
}


/* =========================================================
   MAIN EMI
========================================================= */

.emi-amount {

    margin-bottom: 12px;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 38px;

    font-weight: 700;

    line-height: 1;
}


.emi-amount span {

    margin-left: 3px;

    font-size: 18px;

    font-weight: 400;
}


/* =========================================================
   LOAN DETAILS
========================================================= */

.emi-info {

    margin-bottom: 34px;

    color: rgba(255,255,255,.92);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    line-height: 1.4;
}


/* =========================================================
   BOTTOM VALUES
========================================================= */

.emi-bottom {

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 25px;
}


.emi-value {

    display: flex;

    flex-direction: column;

    min-width: 0;
}


.emi-value strong {

    margin-bottom: 6px;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 24px;

    font-weight: 700;

    line-height: 1;
}


.emi-value small {

    color: rgba(255,255,255,.90);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    line-height: 1.2;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .home-loan-emi-wrapper {

        max-width: 1120px;

        gap: 75px;
    }


    .home-loan-emi-box {

        flex-basis: 580px;

        width: 580px;

        min-height: 285px;

        padding:
            38px
            36px
            32px;
    }


    .home-loan-emi-left h2 {

        font-size: 35px;
    }

}


/* =========================================================
   DESKTOP 992 - 1199
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .home-loan-emi-wrapper {

        max-width: 1000px;

        gap: 45px;
    }


    .home-loan-emi-box {

        flex-basis: 520px;

        width: 520px;

        min-height: 265px;

        padding:
            32px
            30px
            28px;
    }


    .home-loan-emi-left h2 {

        font-size: 31px;
    }


    .emi-amount {

        font-size: 35px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .home-loan-emi-section {

        padding:
            40px
            25px
            55px;
    }


    .home-loan-emi-wrapper {

        gap: 30px;

        max-width: 900px;
    }


    .home-loan-emi-left h2 {

        font-size: 28px;
    }


    .home-loan-emi-left p {

        font-size: 13px;
    }


    .home-loan-emi-box {

        flex-basis: 450px;

        width: 450px;

        min-height: 250px;

        padding:
            29px
            25px
            26px;
    }


    .emi-box-title {

        font-size: 13px;

        margin-bottom: 27px;
    }


    .emi-amount {

        font-size: 30px;
    }


    .emi-amount span {

        font-size: 15px;
    }


    .emi-info {

        font-size: 10px;

        margin-bottom: 28px;
    }


    .emi-bottom {

        gap: 12px;
    }


    .emi-value strong {

        font-size: 19px;
    }


    .emi-value small {

        font-size: 10px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .home-loan-emi-section {

        padding:
            38px
            15px
            48px;
    }


    .home-loan-emi-wrapper {

        flex-direction: column;

        align-items: stretch;

        gap: 30px;
    }


    .home-loan-emi-left {

        width: 100%;

        text-align: center;
    }


    .home-loan-emi-left h2 {

        font-size: 27px;

        line-height: 1.2;

        letter-spacing: 0;
    }


    .home-loan-emi-left p {

        font-size: 13px;

        line-height: 1.45;
    }


    .home-loan-emi-btn {

        min-width: 205px;

        height: 46px;

        font-size: 13px;
    }


    /* LARGE CARD ON MOBILE */

    .home-loan-emi-box {

        width: 100%;

        min-width: 0;

        flex: none;

        min-height: 260px;

        padding:
            29px
            23px
            27px;

        border-radius: 15px;
    }


    .emi-box-title {

        font-size: 13px;

        margin-bottom: 27px;
    }


    .emi-amount {

        font-size: 30px;
    }


    .emi-amount span {

        font-size: 15px;
    }


    .emi-info {

        font-size: 10px;

        margin-bottom: 29px;
    }


    .emi-bottom {

        gap: 10px;
    }


    .emi-value strong {

        font-size: 18px;
    }


    .emi-value small {

        font-size: 10px;
    }

}


/* =========================================================
   IPHONE 376 - 575
========================================================= */

@media (min-width: 376px) and (max-width: 575px) {

    .home-loan-emi-section {

        padding:
            35px
            14px
            45px;
    }


    .home-loan-emi-wrapper {

        gap: 28px;
    }


    .home-loan-emi-left h2 {

        font-size: 25px;
    }


    .home-loan-emi-left p {

        font-size: 12px;
    }


    .home-loan-emi-box {

        min-height: 255px;

        padding:
            27px
            19px
            25px;
    }


    .emi-box-title {

        font-size: 12px;

        margin-bottom: 24px;
    }


    .emi-amount {

        font-size: 27px;
    }


    .emi-amount span {

        font-size: 14px;
    }


    .emi-info {

        font-size: 9px;

        margin-bottom: 26px;

        white-space: nowrap;
    }


    .emi-bottom {

        gap: 7px;
    }


    .emi-value strong {

        font-size: 17px;
    }


    .emi-value small {

        font-size: 9px;
    }

}


/* =========================================================
   IPHONE SE / SMALL MOBILE
========================================================= */

@media (max-width: 375px) {

    .home-loan-emi-section {

        padding:
            32px
            11px
            42px;
    }


    .home-loan-emi-wrapper {

        gap: 25px;
    }


    .home-loan-emi-left h2 {

        font-size: 23px;
    }


    .home-loan-emi-left p {

        font-size: 11px;

        line-height: 1.45;
    }


    .home-loan-emi-btn {

        min-width: 195px;

        height: 44px;

        font-size: 12px;
    }


    .home-loan-emi-box {

        min-height: 245px;

        padding:
            24px
            15px
            22px;

        border-radius: 13px;
    }


    .emi-box-title {

        font-size: 10px;

        margin-bottom: 21px;
    }


    .emi-amount {

        font-size: 23px;
    }


    .emi-amount span {

        font-size: 12px;
    }


    .emi-info {

        font-size: 8px;

        margin-bottom: 23px;

        white-space: nowrap;
    }


    .emi-bottom {

        gap: 4px;
    }


    .emi-value strong {

        font-size: 14px;
    }


    .emi-value small {

        font-size: 8px;
    }

}


.jfin-eligibility-section {

    width: 100%;

    background: #ffffff;

    padding: 35px 25px 75px;

    box-sizing: border-box;

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.jfin-eligibility-container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.jfin-eligibility-header {

    text-align: center;

    margin-bottom: 28px;
}


.jfin-eligibility-header h2 {

    margin: 0 0 5px;

    color: #295cab;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 25px;

    font-weight: 600;

    line-height: 1.3;
}


.jfin-eligibility-header h2 strong {

    color: #00abeb;

    font-weight: 700;
}


.jfin-eligibility-header p {

    margin: 0;

    color: #666666;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;

    line-height: 1.5;
}


/* =========================================================
   TABS OUTER
========================================================= */

.jfin-eligibility-tabs {

    width: 525px;

    max-width: 100%;

    margin: 0 auto 46px;

    padding: 4px;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    background: #eaf2fc;

    border-radius: 8px;

    box-sizing: border-box;
}


/* =========================================================
   TAB BUTTON
========================================================= */

.jfin-eligibility-tab {

    min-height: 40px;

    padding: 9px 12px;

    border: none;

    outline: none;

    background: transparent;

    border-radius: 7px;

    color: #333333;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;

    font-weight: 500;

    cursor: pointer;

    transition: all 0.25s ease;
}


/* ACTIVE TAB */

.jfin-eligibility-tab.active {

    background: #2878e5;

    color: #ffffff;

    box-shadow:
        0 2px 5px rgba(40, 120, 229, 0.15);
}


/* =========================================================
   TAB CONTENT
========================================================= */

.jfin-eligibility-tab-content {

    display: none;

    animation: jfinEligibilityFade 0.25s ease;
}


.jfin-eligibility-tab-content.active {

    display: block;
}


@keyframes jfinEligibilityFade {

    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   MAIN TWO COLUMN GRID
========================================================= */

.jfin-eligibility-grid {

    width: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 45px;

    align-items: start;
}


/* =========================================================
   COLUMN TITLE
========================================================= */

.jfin-column-title {

    margin: 0 0 20px;

    color: #333333;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 18px;

    font-weight: 500;

    line-height: 1.3;
}


/* =========================================================
   CHECKLIST
========================================================= */

.jfin-checklist {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 22px;
}


/* =========================================================
   CHECK ITEM
========================================================= */

.jfin-check-item {

    width: 100%;

    min-height: 69px;

    padding: 13px 16px;

    display: flex;

    align-items: center;

    gap: 23px;

    background: #ffffff;

    border: 1px solid #477cff;

    border-radius: 11px;

    box-sizing: border-box;

    color: #333333;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;

    line-height: 1.4;

    box-shadow:
        0 4px 12px rgba(41, 92, 171, 0.04);
}


/* =========================================================
   CHECK ICON BOX
========================================================= */

.jfin-check-icon {

    flex: 0 0 38px;

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e8f1ff;

    border-radius: 4px;

    color: #2878e5;

    font-size: 19px;
}


/* =========================================================
   DOCUMENT COLUMN
========================================================= */

.jfin-documents-column {

    width: 100%;
}


/* =========================================================
   DOCUMENT ACCORDION
========================================================= */

.jfin-document-accordion {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 22px;
}


/* =========================================================
   DETAILS
========================================================= */

.jfin-document-accordion details {

    width: 100%;

    background: #ffffff;

    border: 1px solid #477cff;

    border-radius: 11px;

    overflow: hidden;

    box-sizing: border-box;

    box-shadow:
        0 4px 12px rgba(41, 92, 171, 0.04);
}


/* =========================================================
   SUMMARY
========================================================= */

.jfin-document-accordion summary {

    min-height: 67px;

    padding: 18px 21px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    color: #333333;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;

    font-weight: 600;

    line-height: 1.35;

    cursor: pointer;

    list-style: none;

    box-sizing: border-box;
}


/* REMOVE DEFAULT MARKER */

.jfin-document-accordion summary::-webkit-details-marker {

    display: none;
}


/* =========================================================
   CHEVRON
========================================================= */

.jfin-document-accordion summary i {

    flex-shrink: 0;

    color: #444444;

    font-size: 11px;

    transition: transform 0.25s ease;
}


/* ROTATE WHEN OPEN */

.jfin-document-accordion details[open] summary i {

    transform: rotate(180deg);
}


/* =========================================================
   DOCUMENT CONTENT
========================================================= */

.jfin-document-content {

    padding:
        0
        21px
        18px;
}


/* =========================================================
   DOCUMENT LIST
========================================================= */

.jfin-document-content ul {

    margin: 0;

    padding-left: 20px;
}


.jfin-document-content li {

    margin-bottom: 13px;

    padding-left: 1px;

    color: #555555;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    line-height: 1.45;
}


.jfin-document-content li:last-child {

    margin-bottom: 0;
}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .jfin-eligibility-section {

        padding:
            35px
            20px
            60px;
    }


    .jfin-eligibility-grid {

        gap: 25px;
    }


    .jfin-eligibility-tabs {

        margin-bottom: 38px;
    }


    .jfin-column-title {

        font-size: 17px;
    }


    .jfin-check-item {

        font-size: 13px;

        gap: 15px;

        padding-left: 12px;

        padding-right: 12px;
    }


    .jfin-check-icon {

        flex-basis: 36px;

        width: 36px;

        height: 36px;

        font-size: 17px;
    }


    .jfin-document-accordion summary {

        font-size: 13px;

        padding-left: 16px;

        padding-right: 16px;
    }


    .jfin-document-content {

        padding-left: 16px;

        padding-right: 16px;
    }


    .jfin-document-content li {

        font-size: 12px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .jfin-eligibility-section {

        padding:
            40px
            15px
            55px;
    }


    .jfin-eligibility-header {

        margin-bottom: 24px;
    }


    .jfin-eligibility-header h2 {

        font-size: 22px;

        line-height: 1.3;
    }


    .jfin-eligibility-header p {

        font-size: 11.5px;

        line-height: 1.5;
    }


    /* =====================================================
       TABS
    ===================================================== */

    .jfin-eligibility-tabs {

        width: 100%;

        margin-bottom: 30px;

        padding: 3px;

        border-radius: 7px;
    }


    .jfin-eligibility-tab {

        min-height: 40px;

        padding:
            8px
            5px;

        font-size: 11px;

        line-height: 1.25;
    }


    /* =====================================================
       ONE COLUMN
    ===================================================== */

    .jfin-eligibility-grid {

        grid-template-columns: 1fr;

        gap: 34px;
    }


    /* =====================================================
       TITLES
    ===================================================== */

    .jfin-column-title {

        margin-bottom: 15px;

        font-size: 17px;
    }


    /* =====================================================
       CHECKLIST
    ===================================================== */

    .jfin-checklist {

        gap: 14px;
    }


    .jfin-check-item {

        min-height: 62px;

        padding:
            11px
            12px;

        gap: 13px;

        border-radius: 10px;

        font-size: 13px;

        line-height: 1.4;
    }


    .jfin-check-icon {

        flex: 0 0 36px;

        width: 36px;

        height: 36px;

        font-size: 17px;
    }


    /* =====================================================
       DOCUMENTS
    ===================================================== */

    .jfin-document-accordion {

        gap: 13px;
    }


    .jfin-document-accordion details {

        border-radius: 10px;
    }


    .jfin-document-accordion summary {

        min-height: 58px;

        padding:
            15px;

        font-size: 13px;

        line-height: 1.4;
    }


    .jfin-document-content {

        padding:
            0
            15px
            16px;
    }


    .jfin-document-content ul {

        padding-left: 18px;
    }


    .jfin-document-content li {

        margin-bottom: 10px;

        font-size: 12px;

        line-height: 1.5;
    }

}


/* =========================================================
   IPHONE 376 - 575
========================================================= */

@media (min-width: 376px) and (max-width: 575px) {

    .jfin-eligibility-section {

        padding:
            38px
            14px
            50px;
    }


    .jfin-eligibility-header h2 {

        font-size: 21px;
    }


    .jfin-eligibility-header p {

        font-size: 11px;
    }


    .jfin-eligibility-tab {

        font-size: 10.5px;
    }


    .jfin-check-item {

        font-size: 12px;
    }


    .jfin-document-accordion summary {

        font-size: 12px;
    }


    .jfin-document-content li {

        font-size: 11.5px;
    }

}


/* =========================================================
   IPHONE SE / 375
========================================================= */

@media (max-width: 375px) {

    .jfin-eligibility-section {

        padding:
            35px
            12px
            48px;
    }


    .jfin-eligibility-header h2 {

        font-size: 20px;
    }


    .jfin-eligibility-header p {

        font-size: 10.5px;
    }


    .jfin-eligibility-tabs {

        margin-bottom: 25px;
    }


    .jfin-eligibility-tab {

        min-height: 38px;

        padding:
            7px
            3px;

        font-size: 10px;
    }


    .jfin-check-item {

        min-height: 58px;

        padding:
            10px;

        gap: 10px;

        font-size: 11.5px;
    }


    .jfin-check-icon {

        flex-basis: 34px;

        width: 34px;

        height: 34px;

        font-size: 15px;
    }


    .jfin-column-title {

        font-size: 16px;
    }


    .jfin-document-accordion summary {

        min-height: 55px;

        padding:
            13px;

        font-size: 11.5px;
    }


    .jfin-document-content {

        padding:
            0
            13px
            14px;
    }


    .jfin-document-content li {

        font-size: 11px;

        line-height: 1.5;
    }

}


/* =========================================================
   MAIN HERO
========================================================= */



/* =========================================================
   DARK OVERLAY
========================================================= */

.home-loan-overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.45) 30%,
        rgba(0, 0, 0, 0.08) 65%,
        rgba(0, 0, 0, 0) 100%
    );

    z-index: 1;
}


/* =========================================================
   CONTAINER
========================================================= */

.home-loan-container {
    position: relative;
    z-index: 2;

    min-height: 525px;

    display: flex;
    align-items: center;
}


/* =========================================================
   CONTENT
========================================================= */

.home-loan-content {
    width: 50%;

    padding-left: 0;
    padding-top: 5px;
    padding-bottom: 5px;
}


/* =========================================================
   HEADING
========================================================= */

.home-loan-content h1 {
    margin: 0 0 8px 0;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 44px;
    line-height: 1.15;

    font-weight: 700;

    letter-spacing: 0;
}


.home-loan-content h1 span {
    color: #2f80ed;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.home-loan-content p {
    margin: 0 0 15px 0;

    color: rgba(255, 255, 255, 0.90);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;
    line-height: 1.5;

    font-weight: 400;
}


/* =========================================================
   APPLY NOW BUTTON
========================================================= */

.home-loan-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 86px;
    height: 35px;

    padding: 0 17px;

    background: #2878e5;

    color: #ffffff !important;

    border-radius: 4px;

    text-decoration: none !important;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;
    font-weight: 600;

    transition: all 0.3s ease;
}


.home-loan-btn:hover {
    background: #1265d2;

    color: #ffffff !important;

    transform: translateY(-1px);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.20);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .home-loan-hero {
        min-height: 525px;

        background-size: cover;

        background-position: center center;
    }


    .home-loan-container {
        min-height: 525px;
    }


    .home-loan-content {
        width: 50%;
    }


    .home-loan-content h1 {
        font-size: 44px;
    }


    .home-loan-content p {
        font-size: 15px;
    }
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .home-loan-hero {
        min-height: 450px;

        background-size: cover;

        background-position: center center;
    }


    .home-loan-container {
        min-height: 450px;
    }


    .home-loan-content {
        width: 50%;
    }


    .home-loan-content h1 {
        font-size: 36px;
    }


    .home-loan-content p {
        font-size: 14px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .home-loan-hero {

        min-height: 360px;

        /*
         * Keep the complete image visible better
         */
        background-size: 100% 100%;

        background-position: center center;

        background-repeat: no-repeat;
    }


    .home-loan-container {

        min-height: 360px;

        display: flex;

        align-items: center;

        padding-left: 30px;
        padding-right: 30px;

        box-sizing: border-box;
    }


    .home-loan-content {

        width: 52%;

        padding: 0;
    }


    .home-loan-content h1 {

        font-size: 29px;

        line-height: 1.18;

        margin-bottom: 9px;
    }


    .home-loan-content p {

        font-size: 12px;

        line-height: 1.45;

        margin-bottom: 15px;
    }


    .home-loan-btn {

        height: 35px;

        min-width: 86px;

        padding: 0 15px;

        font-size: 12px;
    }


    .home-loan-overlay {

        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.68) 0%,
            rgba(0, 0, 0, 0.43) 40%,
            rgba(0, 0, 0, 0.10) 75%,
            rgba(0, 0, 0, 0) 100%
        );
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .home-loan-hero {

        min-height: 300px;

        /*
         * IMPORTANT:
         * Cover was cropping the family image.
         * 100% 100% keeps the whole banner visible.
         */
        background-size: 100% 100%;

        background-position: center center;

        background-repeat: no-repeat;
    }


    .home-loan-container {

        min-height: 300px;

        width: 100%;

        display: flex;

        align-items: center;

        padding-top: 30px;
        padding-bottom: 30px;
        padding-left: 22px;
        padding-right: 22px;

        box-sizing: border-box;
    }


    .home-loan-content {

        width: 58%;

        padding: 0;
    }


    .home-loan-content h1 {

        font-size: 22px;

        line-height: 1.18;

        margin: 0 0 9px 0;
    }


    .home-loan-content p {

        font-size: 11px;

        line-height: 1.5;

        margin: 0 0 15px 0;
    }


    .home-loan-btn {

        height: 34px;

        min-width: 82px;

        padding: 0 15px;

        font-size: 11px;

        border-radius: 4px;
    }


    .home-loan-overlay {

        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.50) 42%,
            rgba(0, 0, 0, 0.12) 78%,
            rgba(0, 0, 0, 0.02) 100%
        );
    }
}


/* =========================================================
   IPHONE / SMALL MOBILE
========================================================= */

@media (max-width: 575px) {

    .home-loan-hero {

        min-height: 270px;

        /*
         * Full banner image visible
         */
        background-size: 100% 100%;

        background-position: center center;

        background-repeat: no-repeat;
    }


    .home-loan-container {

        min-height: 270px;

        padding-top: 25px;
        padding-bottom: 25px;
        padding-left: 18px;
        padding-right: 18px;

        align-items: center;
    }


    .home-loan-content {

        width: 58%;

        max-width: 230px;

        padding: 0;
    }


    .home-loan-content h1 {

        font-size: 20px;

        line-height: 1.18;

        margin-bottom: 8px;
    }


    .home-loan-content p {

        font-size: 10px;

        line-height: 1.45;

        margin-bottom: 13px;
    }


    .home-loan-btn {

        height: 33px;

        min-width: 82px;

        padding: 0 14px;

        font-size: 10px;
    }


    .home-loan-overlay {

        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.70) 0%,
            rgba(0, 0, 0, 0.48) 43%,
            rgba(0, 0, 0, 0.15) 75%,
            rgba(0, 0, 0, 0.02) 100%
        );
    }
}


/* =========================================================
   IPHONE SE / 375px
========================================================= */

@media (max-width: 375px) {

    .home-loan-hero {

        min-height: 245px;

        background-size: 100% 100%;

        background-position: center center;
    }


    .home-loan-container {

        min-height: 245px;

        padding-top: 22px;
        padding-bottom: 22px;
        padding-left: 15px;
        padding-right: 15px;
    }


    .home-loan-content {

        width: 58%;

        max-width: 210px;
    }


    .home-loan-content h1 {

        font-size: 18px;

        line-height: 1.17;

        margin-bottom: 7px;
    }


    .home-loan-content p {

        font-size: 9px;

        line-height: 1.4;

        margin-bottom: 12px;
    }


    .home-loan-btn {

        height: 31px;

        min-width: 78px;

        padding: 0 12px;

        font-size: 9px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .home-loan-hero {

        min-height: 230px;

        background-size: 100% 100%;

        background-position: center center;
    }


    .home-loan-container {

        min-height: 230px;

        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 13px;
        padding-right: 13px;
    }


    .home-loan-content {

        width: 58%;

        max-width: 195px;
    }


    .home-loan-content h1 {

        font-size: 17px;

        line-height: 1.17;
    }


    .home-loan-content p {

        font-size: 8.5px;

        line-height: 1.4;
    }


    .home-loan-btn {

        height: 30px;

        min-width: 75px;

        padding: 0 11px;

        font-size: 9px;
    }
}


/* =========================================================
   EXTRA SMALL DEVICES
========================================================= */

@media (max-width: 320px) {

    .home-loan-hero {

        min-height: 215px;

        background-size: 100% 100%;
    }


    .home-loan-container {

        min-height: 215px;

        padding-left: 12px;
        padding-right: 12px;
    }


    .home-loan-content {

        width: 57%;
    }


    .home-loan-content h1 {

        font-size: 16px;
    }


    .home-loan-content p {

        font-size: 8px;
    }


    .home-loan-btn {

        height: 29px;

        min-width: 72px;

        font-size: 8px;
    }
}

/* emi-calculator */


/* =========================================================
   MAIN SECTION
========================================================= */

.home-loan-emi-section {

    width: 100%;

    background: #edf4fd;

    padding: 45px 25px 60px;

    box-sizing: border-box;

    overflow: hidden;
}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.home-loan-emi-wrapper {

    width: 100%;

    max-width: 1120px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 70px;

    box-sizing: border-box;
}


/* =========================================================
   LEFT SIDE
========================================================= */

.home-loan-emi-left {

    flex: 1;

    min-width: 0;
}


.home-loan-emi-left h2 {

    margin: 0 0 12px;

    color: #333333;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 34px;

    font-weight: 600;

    line-height: 1.15;

    letter-spacing: -0.5px;
}


.home-loan-emi-left p {

    margin: 0 0 22px;

    color: #707070;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    line-height: 1.4;
}


/* =========================================================
   BUTTON
========================================================= */

.home-loan-emi-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    min-width: 215px;

    height: 48px;

    padding: 0 22px;

    background: #2878e5;

    color: #ffffff !important;

    border-radius: 7px;

    text-decoration: none !important;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    font-weight: 600;

    box-sizing: border-box;

    transition:
        all .25s ease;
}


.home-loan-emi-btn:hover {

    background: #1d66cc;

    color: #ffffff !important;

    transform: translateY(-1px);

    box-shadow:
        0 5px 14px rgba(40,120,229,.20);
}


.home-loan-emi-btn span {

    font-size: 23px;

    line-height: 1;
}


/* =========================================================
   RIGHT EMI CARD - LARGE
========================================================= */

.home-loan-emi-box {

    flex: 0 0 560px;

    width: 560px;

    min-height: 275px;

    padding: 36px 34px 30px;

    box-sizing: border-box;

    border-radius: 17px;

    background:
        linear-gradient(
            115deg,
            #2878e5 0%,
            #493ddd 48%,
            #b500d9 100%
        );

    color: #ffffff;

    box-shadow:
        0 7px 20px rgba(41,92,171,.13);
}


/* =========================================================
   CARD TITLE
========================================================= */

.emi-box-title {

    margin-bottom: 32px;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;

    font-weight: 400;
}


/* =========================================================
   MAIN EMI
========================================================= */

.emi-amount {

    margin-bottom: 12px;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 38px;

    font-weight: 700;

    line-height: 1;
}


.emi-amount span {

    margin-left: 3px;

    font-size: 18px;

    font-weight: 400;
}


/* =========================================================
   LOAN DETAILS
========================================================= */

.emi-info {

    margin-bottom: 34px;

    color: rgba(255,255,255,.92);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    line-height: 1.4;
}


/* =========================================================
   BOTTOM VALUES
========================================================= */

.emi-bottom {

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 25px;
}


.emi-value {

    display: flex;

    flex-direction: column;

    min-width: 0;
}


.emi-value strong {

    margin-bottom: 6px;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 24px;

    font-weight: 700;

    line-height: 1;
}


.emi-value small {

    color: rgba(255,255,255,.90);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    line-height: 1.2;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .home-loan-emi-wrapper {

        max-width: 1120px;

        gap: 75px;
    }


    .home-loan-emi-box {

        flex-basis: 580px;

        width: 580px;

        min-height: 285px;

        padding:
            38px
            36px
            32px;
    }


    .home-loan-emi-left h2 {

        font-size: 35px;
    }

}


/* =========================================================
   DESKTOP 992 - 1199
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .home-loan-emi-wrapper {

        max-width: 1000px;

        gap: 45px;
    }


    .home-loan-emi-box {

        flex-basis: 520px;

        width: 520px;

        min-height: 265px;

        padding:
            32px
            30px
            28px;
    }


    .home-loan-emi-left h2 {

        font-size: 31px;
    }


    .emi-amount {

        font-size: 35px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .home-loan-emi-section {

        padding:
            40px
            25px
            55px;
    }


    .home-loan-emi-wrapper {

        gap: 30px;

        max-width: 900px;
    }


    .home-loan-emi-left h2 {

        font-size: 28px;
    }


    .home-loan-emi-left p {

        font-size: 13px;
    }


    .home-loan-emi-box {

        flex-basis: 450px;

        width: 450px;

        min-height: 250px;

        padding:
            29px
            25px
            26px;
    }


    .emi-box-title {

        font-size: 13px;

        margin-bottom: 27px;
    }


    .emi-amount {

        font-size: 30px;
    }


    .emi-amount span {

        font-size: 15px;
    }


    .emi-info {

        font-size: 10px;

        margin-bottom: 28px;
    }


    .emi-bottom {

        gap: 12px;
    }


    .emi-value strong {

        font-size: 19px;
    }


    .emi-value small {

        font-size: 10px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .home-loan-emi-section {

        padding:
            38px
            15px
            48px;
    }


    .home-loan-emi-wrapper {

        flex-direction: column;

        align-items: stretch;

        gap: 30px;
    }


    .home-loan-emi-left {

        width: 100%;

        text-align: center;
    }


    .home-loan-emi-left h2 {

        font-size: 27px;

        line-height: 1.2;

        letter-spacing: 0;
    }


    .home-loan-emi-left p {

        font-size: 13px;

        line-height: 1.45;
    }


    .home-loan-emi-btn {

        min-width: 205px;

        height: 46px;

        font-size: 13px;
    }


    /* LARGE CARD ON MOBILE */

    .home-loan-emi-box {

        width: 100%;

        min-width: 0;

        flex: none;

        min-height: 260px;

        padding:
            29px
            23px
            27px;

        border-radius: 15px;
    }


    .emi-box-title {

        font-size: 13px;

        margin-bottom: 27px;
    }


    .emi-amount {

        font-size: 30px;
    }


    .emi-amount span {

        font-size: 15px;
    }


    .emi-info {

        font-size: 10px;

        margin-bottom: 29px;
    }


    .emi-bottom {

        gap: 10px;
    }


    .emi-value strong {

        font-size: 18px;
    }


    .emi-value small {

        font-size: 10px;
    }

}


/* =========================================================
   IPHONE 376 - 575
========================================================= */

@media (min-width: 376px) and (max-width: 575px) {

    .home-loan-emi-section {

        padding:
            35px
            14px
            45px;
    }


    .home-loan-emi-wrapper {

        gap: 28px;
    }


    .home-loan-emi-left h2 {

        font-size: 25px;
    }


    .home-loan-emi-left p {

        font-size: 12px;
    }


    .home-loan-emi-box {

        min-height: 255px;

        padding:
            27px
            19px
            25px;
    }


    .emi-box-title {

        font-size: 12px;

        margin-bottom: 24px;
    }


    .emi-amount {

        font-size: 27px;
    }


    .emi-amount span {

        font-size: 14px;
    }


    .emi-info {

        font-size: 9px;

        margin-bottom: 26px;

        white-space: nowrap;
    }


    .emi-bottom {

        gap: 7px;
    }


    .emi-value strong {

        font-size: 17px;
    }


    .emi-value small {

        font-size: 9px;
    }

}


/* =========================================================
   IPHONE SE / SMALL MOBILE
========================================================= */

@media (max-width: 375px) {

    .home-loan-emi-section {

        padding:
            32px
            11px
            42px;
    }


    .home-loan-emi-wrapper {

        gap: 25px;
    }


    .home-loan-emi-left h2 {

        font-size: 23px;
    }


    .home-loan-emi-left p {

        font-size: 11px;

        line-height: 1.45;
    }


    .home-loan-emi-btn {

        min-width: 195px;

        height: 44px;

        font-size: 12px;
    }


    .home-loan-emi-box {

        min-height: 245px;

        padding:
            24px
            15px
            22px;

        border-radius: 13px;
    }


    .emi-box-title {

        font-size: 10px;

        margin-bottom: 21px;
    }


    .emi-amount {

        font-size: 23px;
    }


    .emi-amount span {

        font-size: 12px;
    }


    .emi-info {

        font-size: 8px;

        margin-bottom: 23px;

        white-space: nowrap;
    }


    .emi-bottom {

        gap: 4px;
    }


    .emi-value strong {

        font-size: 14px;
    }


    .emi-value small {

        font-size: 8px;
    }

}


/* property details */
  
   /* =========================================================
   JFINSERV PROPERTIES PAGE
   COMPLETE NEW UI
   DATA / BLADE / LINKS NOT CHANGED
========================================================= */


/* =========================================================
   GLOBAL
========================================================= */

main {
    background: #f7faff;
}

main .container {
    max-width: 1380px;
}


/* =========================================================
   HERO
========================================================= */

.video-hero {
    position: relative;
    width: 100%;
    height: 520px;
    overflow: hidden;
    background: #0d2d5c;
}

.video-hero video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-banner-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(5, 35, 82, .88) 0%,
            rgba(10, 65, 130, .60) 45%,
            rgba(10, 65, 130, .15) 100%
        );
}

.video-overlay-content {
    width: 100%;
    max-width: 1380px;
    margin: auto;
    padding: 0 35px;
}

.video-overlay-content h1 {
    max-width: 720px;

    margin: 0 0 18px;

    color: #ffffff;

    font-size: 48px;
    font-weight: 700;

    line-height: 1.15;
}

.video-overlay-content h1 span {
    color: #00abeb;
}

.video-overlay-content p {
    max-width: 620px;

    margin: 0;

    color: rgba(255,255,255,.90);

    font-size: 18px;
    line-height: 1.6;
}


/* =========================================================
   SEARCH AREA
========================================================= */

.hero-search-wrapper {
    position: relative;

    margin-top: -65px;

    z-index: 20;
}

.hero-search-box {
    position: relative;

    padding: 26px 28px;

    background: rgba(255,255,255,.97);

    border: 1px solid rgba(41,92,171,.12);

    border-radius: 18px;

    box-shadow:
        0 20px 55px rgba(20,57,100,.16);
}

.hero-search-top {
    display: flex;

    gap: 12px;

    margin-bottom: 16px;
}

.hero-search-top input {
    flex: 1;

    height: 50px;

    padding: 0 18px;

    background: #f7faff;

    border: 1px solid #e2e9f2;

    border-radius: 10px;

    color: #27364d;

    font-size: 14px;

    outline: none;

    transition: .3s ease;
}

.hero-search-top input:focus {
    background: #ffffff;

    border-color: #00abeb;

    box-shadow:
        0 0 0 4px rgba(0,171,235,.08);
}

.hero-search-top button {
    height: 50px;

    padding: 0 30px;

    background: linear-gradient(
        135deg,
        #295cab,
        #00abeb
    );

    color: #ffffff;

    border: 0;

    border-radius: 10px;

    font-weight: 600;

    cursor: pointer;

    transition: .3s ease;
}

.hero-search-top button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(41,92,171,.25);
}

.hero-search-filters {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 12px;
}

.hero-search-filters select,
.hero-search-filters .select2-container {
    width: 100% !important;
}

.hero-search-filters select {
    height: 46px;

    padding: 0 13px;

    background: #ffffff;

    border: 1px solid #e3e9f1;

    border-radius: 9px;

    color: #475569;

    font-size: 13px;

    outline: none;

    cursor: pointer;
}

.hero-search-filters select:focus {
    border-color: #00abeb;
}


/* =========================================================
   SELECT2
========================================================= */

.select2-container--default
.select2-selection--single {
    height: 46px !important;

    border: 1px solid #e3e9f1 !important;

    border-radius: 9px !important;

    background: #ffffff !important;
}

.select2-container--default
.select2-selection--single
.select2-selection__rendered {
    line-height: 44px !important;

    padding-left: 13px !important;

    color: #475569 !important;

    font-size: 13px;
}

.select2-container--default
.select2-selection--single
.select2-selection__arrow {
    height: 44px !important;
}


/* =========================================================
   SECTION HEADERS
========================================================= */

.section-header {
    position: relative;

    margin: 75px auto 38px;

    text-align: center;
}

.section-header::before {
    content: "";

    display: block;

    width: 45px;
    height: 4px;

    margin: 0 auto 14px;

    background: linear-gradient(
        90deg,
        #295cab,
        #00abeb
    );

    border-radius: 10px;
}

.section-header h2 {
    margin: 0 0 10px;

    color: #295cab;

    font-size: 34px;

    font-weight: 700;

    line-height: 1.25;
}

.section-header h2::first-letter {
    color: #295cab;
}

.section-header p {
    max-width: 650px;

    margin: 0 auto;

    color: #7a8798;

    font-size: 14px;

    line-height: 1.6;
}


/* =========================================================
   LOCALITIES SECTION
========================================================= */

.localities-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 24px;

    margin-bottom: 65px;
}

.locality-card {
    position: relative;

    padding: 24px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f7fbff
        );

    border: 1px solid #e5edf6;

    border-radius: 18px;

    box-shadow:
        0 8px 28px rgba(31,64,104,.07);

    overflow: hidden;

    transition: .35s ease;
}



.localty-title,
.locality-title {
    position: relative;

    margin: 0 0 20px;

    padding-bottom: 14px;

    color: #295cab;

    font-size: 21px;

    font-weight: 700;

    text-align: left;

    border-bottom: 1px solid #e8eef5;
}

.localty-title::after,
.locality-title::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 55px;
    height: 3px;

    background: #00abeb;

    border-radius: 10px;
}


/* =========================================================
   MINI PROPERTY GRID
========================================================= */

.properties-mini-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 15px;
}

.mini-property {
    position: relative;

    display: flex;

    flex-direction: column;

    gap: 7px;

    padding: 9px;

    background: #ffffff;

    border: 1px solid #edf1f6;

    border-radius: 12px;

    text-decoration: none !important;

    overflow: hidden;

    transition: .3s ease;
}

.mini-property:hover {
    transform: translateY(-4px);

    border-color: #cfe7f6;

    box-shadow:
        0 10px 25px rgba(30,65,100,.10);
}

.mini-property img {
    width: 100%;

    aspect-ratio: 16 / 10;

    object-fit: cover;

    border-radius: 8px;

    transition: .4s ease;
}

.mini-property:hover img {
    transform: scale(1.04);
}

.mini-developer {
    color: #295cab;

    font-size: 11px;

    font-weight: 600;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.mini-name {
    color: #26364c;

    font-size: 13px;

    font-weight: 600;

    line-height: 1.35;
}

.mini-location {
    display: flex;

    align-items: center;

    gap: 4px;

    color: #8994a3;

    font-size: 10px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* =========================================================
   PROPERTY GRID
========================================================= */

.properties-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap: 26px;

    margin-bottom: 55px;
}


/* =========================================================
   PROPERTY CARD
========================================================= */

.property-card {
    position: relative;

    background: #ffffff;

    border: 1px solid #e6edf5;

    border-radius: 17px;

    overflow: hidden;

    box-shadow:
        0 8px 28px rgba(25,62,100,.07);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.property-card:hover {
    transform: translateY(-8px);

    border-color: rgba(0,171,235,.35);

    box-shadow:
        0 20px 48px rgba(25,62,100,.14);
}


/* =========================================================
   PROPERTY IMAGE
========================================================= */

.property-image-wrapper {
    position: relative;

    height: 255px;

    overflow: hidden;

    background: #edf2f7;
}

.property-image-wrapper img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .55s ease;
}

.property-card:hover
.property-image-wrapper img {
    transform: scale(1.07);
}


/* =========================================================
   PROPERTY STATUS
========================================================= */

.property-badge {
    position: absolute;

    top: 14px;
    left: 14px;

    right: auto;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 7px 13px;

    background: rgba(255,255,255,.95);

    color: #295cab;

    border: 1px solid rgba(255,255,255,.8);

    border-radius: 20px;

    font-size: 11px;

    font-weight: 700;

    box-shadow:
        0 5px 15px rgba(0,0,0,.12);

    backdrop-filter: blur(8px);

    z-index: 5;
}

.property-badge::before {
    content: "";

    width: 7px;
    height: 7px;

    background: #1dbb70;

    border-radius: 50%;

    box-shadow:
        0 0 0 3px rgba(29,187,112,.12);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.property-overlay {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding: 45px 18px 15px;

    background:
        linear-gradient(
            to top,
            rgba(4,24,48,.82),
            transparent
        );

    opacity: 0;

    transition: .35s ease;
}

.property-card:hover
.property-overlay {
    opacity: 1;
}

.quick-stats {
    display: flex;

    gap: 18px;

    color: #ffffff;

    font-size: 12px;
}

.stat-item {
    display: flex;

    align-items: center;

    gap: 6px;
}

.stat-item i {
    color: #00abeb;
}


/* =========================================================
   PROPERTY DETAILS
========================================================= */

.property-details {
    padding: 20px;
}

.property-title {
    min-height: 48px;

    margin: 0 0 10px;

    color: #253858;

    font-size: 20px;

    font-weight: 700;

    line-height: 1.3;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;
}

.property-developer {
    display: flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 8px;

    color: #687588;

    font-size: 13px;
}

.property-developer i {
    color: #295cab;
}

.property-location {
    display: flex;

    align-items: flex-start;

    gap: 7px;

    min-height: 36px;

    margin-bottom: 16px;

    color: #8994a3;

    font-size: 12px;

    line-height: 1.5;
}

.property-location i {
    color: #00abeb;

    margin-top: 2px;
}


/* =========================================================
   SPECS
========================================================= */

.property-specs {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 0;

    margin-bottom: 17px;

    padding: 13px;

    background: #f7faff;

    border: 1px solid #edf2f7;

    border-radius: 10px;
}

.spec-item {
    display: flex;

    flex-direction: column;

    gap: 4px;
}

.spec-item + .spec-item {
    padding-left: 18px;

    border-left: 1px solid #e2e9f1;
}

.spec-label {
    color: #99a2ae;

    font-size: 9px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: .7px;
}

.spec-value {
    color: #314158;

    font-size: 13px;

    font-weight: 700;
}


/* =========================================================
   PROPERTY FOOTER
========================================================= */

.property-footer {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding-top: 16px;

    border-top: 1px solid #edf1f5;
}

.property-price {
    display: flex;

    flex-direction: column;

    gap: 2px;

    color: #295cab;

    font-size: 16px;

    font-weight: 700;

    line-height: 1.3;
}

.property-price::before {
    content: "Starting Price";

    color: #98a2ae;

    font-size: 9px;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: .5px;
}


/* =========================================================
   CONTACT BUTTON
========================================================= */

.contact-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 10px 16px;

    background: #295cab;

    color: #ffffff !important;

    border: 0;

    border-radius: 7px;

    font-size: 12px;

    font-weight: 600;

    text-decoration: none !important;

    transition: .3s ease;
}

.contact-btn:hover {
    background: #00abeb;

    color: #ffffff !important;

    transform: translateX(3px);
}


/* =========================================================
   HIDDEN EXTRA PROPERTIES
========================================================= */

.extra-property {
    display: none;
}


/* =========================================================
   FEATURES
========================================================= */

.features-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;

    margin: 65px 0;
}

.feature-card {
    position: relative;

    padding: 28px 22px;

    background: #ffffff;

    border: 1px solid #e7edf5;

    border-radius: 16px;

    text-align: center;

    box-shadow:
        0 8px 25px rgba(30,65,100,.06);

    transition: .35s ease;

    overflow: hidden;
}

.feature-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #295cab,
            #00abeb
        );
}

.feature-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 18px 40px rgba(30,65,100,.12);
}

.feature-icon {
    width: 62px;
    height: 62px;

    margin: 0 auto 17px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #e7f1ff,
            #e8faff
        );

    color: #295cab;

    border-radius: 15px;

    font-size: 26px;
}

.feature-card h3 {
    margin: 0 0 9px;

    color: #253858;

    font-size: 18px;

    font-weight: 700;
}

.feature-card p {
    margin: 0;

    color: #788493;

    font-size: 13px;

    line-height: 1.65;
}


/* =========================================================
   SERVICES
========================================================= */

.services-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 25px;

    margin: 65px 0;
}

.service-card {
    background: #ffffff;

    border: 1px solid #e6edf5;

    border-radius: 17px;

    overflow: hidden;

    box-shadow:
        0 8px 28px rgba(25,62,100,.07);

    transition: .35s ease;
}

.service-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 18px 42px rgba(25,62,100,.13);
}

.service-image {
    width: 100%;

    height: 215px;

    object-fit: cover;
}

.service-content {
    padding: 21px;
}

.service-content h3 {
    margin: 0 0 9px;

    color: #295cab;

    font-size: 20px;

    font-weight: 700;
}

.service-content p {
    margin: 0;

    color: #788493;

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   TESTIMONIALS
========================================================= */

.testimonials {
    margin: 70px 0;

    padding: 50px 35px;

    background:
        linear-gradient(
            135deg,
            #f4f9ff,
            #ffffff
        );

    border: 1px solid #e5edf6;

    border-radius: 22px;

    box-shadow:
        0 10px 35px rgba(25,62,100,.06);
}

.testimonial-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 22px;

    margin-top: 35px;
}

.testimonial-card {
    position: relative;

    padding: 25px;

    background: #ffffff;

    border: 1px solid #e8eef5;

    border-radius: 15px;

    box-shadow:
        0 6px 22px rgba(30,65,100,.05);

    border-left: 4px solid #295cab;
}

.testimonial-stars {
    margin-bottom: 12px;

    color: #f5b942;

    font-size: 16px;
}

.testimonial-card p {
    margin: 0;

    color: #687588;

    font-size: 13px;

    line-height: 1.7;
}

.testimonial-author {
    margin-top: 17px;

    color: #253858;

    font-size: 14px;

    font-weight: 700;
}

.testimonial-role {
    color: #929dab;

    font-size: 11px;
}


/* =========================================================
   VIEW ALL / LOAD MORE
========================================================= */

#loadMoreBtn,
#loadMoreFeatured {
    padding: 12px 25px;

    background: #295cab;

    color: #ffffff;

    border: 0;

    border-radius: 7px;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition: .3s ease;
}

#loadMoreBtn:hover,
#loadMoreFeatured:hover {
    background: #00abeb;

    transform: translateY(-2px);
}


/* =========================================================
   APPLY BUTTON
========================================================= */

.apply-btn {
    background: #295cab;

    color: #ffffff;

    border: 0;

    border-radius: 7px;

    transition: .3s ease;
}

.apply-btn:hover {
    background: #00abeb;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .properties-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .localities-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .features-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .services-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .testimonial-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .hero-search-filters {
        grid-template-columns:
            repeat(2, 1fr);
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .video-hero {
        height: 390px !important;
        min-height: 390px !important;
    }

    .video-overlay-content {
        padding: 0 20px !important;
    }

    .video-overlay-content h1 {
        max-width: 330px;

        font-size: 34px !important;
    }

    .video-overlay-content p {
        max-width: 320px;

        font-size: 14px !important;
    }


    /* SEARCH */

    .hero-search-wrapper {
        margin-top: -30px !important;

        padding: 0 15px;

        box-sizing: border-box;
    }

    .hero-search-box {
        padding: 17px;

        border-radius: 14px;
    }

    .hero-search-top {
        flex-direction: column;

        gap: 10px;
    }

    .hero-search-top input,
    .hero-search-top button {
        width: 100%;

        height: 44px;
    }

    .hero-search-filters {
        grid-template-columns: 1fr;

        gap: 9px;
    }


    /* HEADERS */

    .section-header {
        margin: 50px 0 27px;
    }

    .section-header h2 {
        font-size: 27px !important;
    }

    .section-header p {
        padding: 0 10px;

        font-size: 13px !important;
    }


    /* LOCALITIES */

    .localities-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .locality-card {
        padding: 18px;
    }

    .properties-mini-grid {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 10px;
    }


    /* PROPERTIES */

    .properties-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .property-card:hover {
        transform: none;
    }

    .property-image-wrapper {
        height: 230px;
    }

    .property-overlay {
        opacity: 1;
    }

    .property-details {
        padding: 18px;
    }

    .property-title {
        font-size: 19px;
    }

    .property-specs {
        grid-template-columns: 1fr 1fr;
    }


    /* FEATURES */

    .features-grid {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 14px;

        margin: 40px 0;
    }

    .feature-card {
        padding: 21px 15px;
    }

    .feature-card h3 {
        font-size: 16px;
    }

    .feature-card p {
        font-size: 12px;
    }


    /* SERVICES */

    .services-grid {
        grid-template-columns: 1fr;

        gap: 18px;

        margin: 40px 0;
    }


    /* TESTIMONIAL */

    .testimonials {
        margin: 45px 0;

        padding: 28px 15px;
    }

    .testimonial-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .video-hero {
        height: 320px !important;

        min-height: 320px !important;
    }

    .video-overlay-content h1 {
        max-width: 280px;

        font-size: 27px !important;
    }

    .video-overlay-content p {
        max-width: 270px;

        font-size: 12px !important;
    }


    .hero-search-wrapper {
        padding-left: 12px;

        padding-right: 12px;
    }

    .hero-search-box {
        padding: 14px;
    }


    .section-header h2 {
        font-size: 24px !important;
    }


    .locality-card {
        padding: 14px;
    }


    .properties-mini-grid {
        gap: 8px;
    }


    .property-image-wrapper {
        height: 210px;
    }


    .property-details {
        padding: 15px;
    }


    .property-title {
        font-size: 18px;
    }


    .property-developer,
    .property-location {
        font-size: 12px;
    }


    .property-price {
        font-size: 18px;
    }


    .contact-btn {
        padding: 9px 13px;

        font-size: 11px;
    }


    .features-grid {
        grid-template-columns: 1fr;
    }


    .feature-card {
        padding: 20px;
    }


    .service-image {
        height: 185px;
    }


    .service-content {
        padding: 18px;
    }

}


/* =========================================================
   EXTRA SMALL
========================================================= */

@media (max-width: 360px) {

    .video-hero {
        height: 290px !important;

        min-height: 290px !important;
    }

    .video-overlay-content h1 {
        max-width: 240px;

        font-size: 23px !important;
    }

    .video-overlay-content p {
        max-width: 230px;

        font-size: 11px !important;
    }


    .properties-mini-grid {
        grid-template-columns: 1fr;
    }


    .mini-property {
        display: grid;

        grid-template-columns: 90px 1fr;

        column-gap: 10px;

        align-items: center;
    }


    .mini-property img {
        width: 90px;

        height: 65px;

        grid-row: span 3;
    }


    .property-image-wrapper {
        height: 190px;
    }


    .property-title {
        font-size: 17px;
    }


    .property-price {
        font-size: 17px;
    }

}

/* =========================================================
   PROPERTIES SEARCH - MOBILE UI FIX ONLY
   Desktop / backend unchanged
   ========================================================= */

@media screen and (max-width: 767px) {

    /* SEARCH WRAPPER */
    .hero-search-wrapper {
        width: 100% !important;

        margin-top: -20px !important;

        padding-left: 12px !important;
        padding-right: 12px !important;

        box-sizing: border-box !important;
    }


    /* SEARCH BOX */
    .hero-search-box {
        width: 100% !important;

        padding: 14px !important;

        box-sizing: border-box !important;

        border-radius: 14px !important;

        overflow: visible !important;
    }


    /* SEARCH INPUT + BUTTON */
    .hero-search-top {
        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;

        gap: 9px !important;

        margin-bottom: 12px !important;
    }


    .hero-search-top input {
        width: 100% !important;

        height: 46px !important;

        min-height: 46px !important;

        padding: 0 14px !important;

        box-sizing: border-box !important;

        border-radius: 9px !important;
    }


    .hero-search-top button {
        width: 100% !important;

        height: 44px !important;

        min-height: 44px !important;

        padding: 0 20px !important;

        box-sizing: border-box !important;

        border-radius: 9px !important;
    }


    /* FILTERS */
    .hero-search-filters {
        display: grid !important;

        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        width: 100% !important;

        gap: 9px !important;

        box-sizing: border-box !important;
    }


    /* NORMAL SELECT */
    .hero-search-filters select {
        width: 100% !important;

        min-width: 0 !important;

        height: 44px !important;

        box-sizing: border-box !important;

        padding: 0 10px !important;

        border-radius: 8px !important;
    }


    /* SELECT2 */
    .hero-search-filters .select2-container {
        width: 100% !important;

        min-width: 0 !important;

        max-width: 100% !important;

        box-sizing: border-box !important;
    }


    .hero-search-filters
    .select2-selection--single {
        width: 100% !important;

        height: 44px !important;

        box-sizing: border-box !important;

        border-radius: 8px !important;
    }


    .hero-search-filters
    .select2-selection__rendered {
        line-height: 42px !important;

        padding-left: 10px !important;

        padding-right: 25px !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;
    }


    .hero-search-filters
    .select2-selection__arrow {
        height: 42px !important;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 480px) {

    .hero-search-wrapper {
        margin-top: -15px !important;

        padding-left: 10px !important;
        padding-right: 10px !important;
    }


    .hero-search-box {
        padding: 12px !important;

        border-radius: 12px !important;
    }


    .hero-search-top {
        gap: 8px !important;

        margin-bottom: 10px !important;
    }


    .hero-search-top input {
        height: 44px !important;
    }


    .hero-search-top button {
        height: 42px !important;
    }


    .hero-search-filters {
        grid-template-columns: 1fr 1fr !important;

        gap: 8px !important;
    }


    .hero-search-filters select,
    .hero-search-filters
    .select2-selection--single {
        height: 42px !important;
    }


    .hero-search-filters
    .select2-selection__rendered {
        line-height: 40px !important;

        padding-left: 9px !important;

        font-size: 12px !important;
    }


    .hero-search-filters
    .select2-selection__arrow {
        height: 40px !important;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 360px) {

    .hero-search-wrapper {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }


    .hero-search-box {
        padding: 10px !important;
    }


    .hero-search-filters {
        gap: 7px !important;
    }


    .hero-search-filters
    .select2-selection__rendered {
        font-size: 11px !important;

        padding-left: 7px !important;
    }
}



    :root {
        --primary-color: #4c5fd7;
        --secondary-color: #295cab;
        --text-dark: #1a1a2e;
        --text-muted: #6b7280;
        --bg-light: #f8f9fc;
        --white: #ffffff;
        --shadow: 0 10px 30px rgba(0,0,0,0.05);
        --border-color: #e2e8f0;
    }

    /* Brochure Modal Styles */
#enquiryModal .modal-content-prop {
    background: #ffffff;
    width: 500px;
    padding: 0;
    border-radius: 20px;
    overflow: hidden;
    color: #1a1a2e;
    box-shadow: 0 25px 60px rgba(0,0,0,0.3);
    animation: slideUp 0.4s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

#enquiryModal .modal-header-prop {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 28px 30px 20px;
    background: linear-gradient(135deg, #4c5fd7 0%, #295cab 100%);
    color: #ffffff;
}

#enquiryModal .modal-header-title h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: #ffffff;
}

#enquiryModal .modal-header-title p {
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    margin: 0;
}

#enquiryModal .modal-close-prop {
    margin-top: -4px;
}

#enquiryModal .close-btn {
    background: rgba(255,255,255,0.15);
    border: none;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

#enquiryModal .close-btn:hover {
    background: rgba(255,255,255,0.3);
    transform: rotate(90deg);
}

#enquiryModal .modal-body {
    padding: 24px 30px 30px;
}

#enquiryModal .form-group {
    margin-bottom: 16px;
}

#enquiryModal .form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #2c3e80;
    margin-bottom: 5px;
}

#enquiryModal .form-group .required {
    color: #ef4444;
}

#enquiryModal .brochure-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.3s ease;
    background-color: #f9fafb;
    color: #1a1a2e;
    outline: none;
    box-sizing: border-box;
}

#enquiryModal .brochure-input:focus {
    border-color: #4c5fd7;
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(76, 95, 215, 0.1);
}

#enquiryModal .brochure-input::placeholder {
    color: #9ca3af;
}

#enquiryModal .brochure-info-box {
    display: flex;
    gap: 12px;
    margin: 18px 0 20px;
    padding: 12px 0;
    border-top: 1px solid #f1f3f9;
    border-bottom: 1px solid #f1f3f9;
}

#enquiryModal .brochure-info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #4b5563;
}

#enquiryModal .brochure-info-item i {
    color: #4c5fd7;
    font-size: 16px;
}

#enquiryModal .brochure-submit-btn {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #4c5fd7 0%, #295cab 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#enquiryModal .brochure-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(76, 95, 215, 0.4);
}

#enquiryModal .brochure-submit-btn:active {
    transform: translateY(0);
}

#enquiryModal .brochure-submit-btn i {
    font-size: 18px;
}

/* Modal Backdrop */
.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 999;
    animation: fadeIn 0.3s ease;
}

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

/* Modal Container */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
}

#enquiryModal.modal.active {
    visibility: visible;
}

/* Responsive */
@media (max-width: 540px) {
    #enquiryModal .modal-content-prop {
        width: 92%;
        margin: 0 10px;
        border-radius: 16px;
    }
    
    #enquiryModal .modal-header-prop {
        padding: 20px 20px 16px;
    }
    
    #enquiryModal .modal-header-title h2 {
        font-size: 20px;
    }
    
    #enquiryModal .modal-body {
        padding: 20px;
    }
    
    #enquiryModal .brochure-info-box {
        flex-direction: column;
        gap: 6px;
    }
}

    * { box-sizing: border-box; }

    .custom-container {
        max-width: 1440px;
        margin: 8px auto;
        padding: 0 20px;
    }

    .main-wrapper {
        padding: 4rem 0;
        background: var(--bg-light);
    }

    .custom-row {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -15px;
    }

    .content-main {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
        padding: 0 15px;
    }

    .content-sidebar {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
        padding: 0 15px;
    }

    @media (max-width: 992px) {
        .content-main, .content-sidebar {
            flex: 0 0 100%;
            max-width: 100%;
        }
        .content-sidebar { margin-top: 2rem; }
    }

    .property-hero {
        background: var(--white);
        padding: 2rem 0;
        margin-bottom: 2rem;
        box-shadow: var(--shadow);
    }

    .breadcrumb-nav {
        margin-bottom: 1.5rem;
        font-size: 0.9rem;
    }

    .breadcrumb-nav a {
        color: var(--primary-color);
        text-decoration: none;
    }

    .property-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 1.5rem;
        flex-wrap: nowrap;
        gap: 2rem;
    }

    .property-main-info {
        flex: 1;
    }

    .property-main-info h1 {
        font-size: 2.2rem;
        font-weight: 800;
        color: var(--text-dark);
        margin-bottom: 0.25rem;
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .rera-badge {
        background: #e6fffa;
        color: #2d3748;
        font-size: 0.7rem;
        padding: 2px 8px;
        border-radius: 4px;
        border: 1px solid #cbd5e0;
        display: flex;
        align-items: center;
        gap: 4px;
        font-weight: 600;
    }

    .developer-link {
        color: var(--primary-color);
        text-decoration: none;
        font-weight: 700;
        font-size: 0.9rem;
        text-transform: uppercase;
    }

    .property-location {
        color: var(--text-muted);
        margin-top: 0.5rem;
        font-size: 1rem;
    }

    .property-price-box {
        text-align: right;
        min-width: 250px;
    }

    .price-value {
        font-size: 1.8rem;
        font-weight: 800;
        color: var(--text-dark);
        line-height: 1;
    }

    .emi-info {
        color: var(--primary-color);
        font-weight: 600;
        font-size: 0.9rem;
        margin-top: 4px;
    }

    .agreement-label {
        font-size: 0.8rem;
        color: var(--text-muted);
    }

    .btn-contact-top {
        background: var(--primary-color);
        color: white;
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        font-weight: 700;
        margin-top: 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.3s;
        width: 100%;
        justify-content: center;
        text-decoration: none;
        cursor: pointer;
    }

    /* Grid Gallery Layout */
    .grid-gallery {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 10px;
        margin-bottom: 2rem;
        border-radius: 12px;
        overflow: hidden;
    }
   /* =========================================
   PROPERTY GALLERY
   IMAGE SHOULD NEVER BE CROPPED
   ========================================= */

.gallery-wrapper {
    width: 100%;
    margin-bottom: 2rem;
}

/* Main gallery container */
.gallery-main {
    position: relative;
    width: 100%;
    background: #f7f8fa;
    border-radius: 12px;
    overflow: hidden;

    /* Important:
       Height will automatically follow image */
    height: auto;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* Main image */
.gallery-main img {
    display: block;
    width: 100%;
    height: auto;

    /* IMPORTANT - don't crop */
    object-fit: contain;

    max-width: 100%;
    max-height: none;

    border-radius: 12px;
}

/* Navigation arrows */
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 45px;
    height: 45px;

    background: rgba(0, 0, 0, 0.55);
    color: #fff;

    border: none;
    border-radius: 50%;

    font-size: 2rem;
    line-height: 1;

    cursor: pointer;
    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: all 0.3s ease;
}

.nav-arrow:hover {
    background: rgba(0, 0, 0, 0.8);
}

.nav-arrow.left {
    left: 15px;
}

.nav-arrow.right {
    right: 15px;
}


/* =========================================
   THUMBNAILS
   ========================================= */

.thumbnail-bar {
    display: flex;
    gap: 10px;

    margin-top: 12px;

    overflow-x: auto;

    padding-bottom: 5px;

    scrollbar-width: thin;
}

.thumbnail-bar::-webkit-scrollbar {
    height: 6px;
}

.thumbnail-bar::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

/* Thumbnail itself */
.thumbnail {
    width: 120px;
    height: 80px;

    flex: 0 0 120px;

    /* Keep complete image */
    object-fit: contain;

    background: #f7f7f7;

    border-radius: 8px;

    cursor: pointer;

    opacity: 0.6;

    border: 2px solid transparent;

    transition: 0.3s ease;
}

.thumbnail:hover,
.thumbnail.active {
    opacity: 1;
    border-color: #000;
}


/* =========================================
   MOBILE GALLERY
   ========================================= */

@media (max-width: 992px) {

    .gallery-wrapper {
        width: 100%;
    }

    .gallery-main {
        width: 100%;
        height: auto;
        min-height: 0;

        background: #f7f8fa;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .gallery-main img {
        width: 100%;
        height: auto;

        object-fit: contain;

        max-width: 100%;
        max-height: none;
    }

    .thumbnail {
        width: 100px;
        height: 70px;
        flex: 0 0 100px;
    }

    .nav-arrow {
        width: 38px;
        height: 38px;
        font-size: 1.5rem;
    }

    .nav-arrow.left {
        left: 8px;
    }

    .nav-arrow.right {
        right: 8px;
    }
}


/* =========================================
   SMALL MOBILE
   ========================================= */

@media (max-width: 576px) {

    .gallery-main {
        border-radius: 8px;
    }

    .gallery-main img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .thumbnail-bar {
        gap: 8px;
    }

    .thumbnail {
        width: 85px;
        height: 60px;
        flex: 0 0 85px;
    }

    .nav-arrow {
        width: 34px;
        height: 34px;
        font-size: 1.3rem;
    }
}

    .gallery-side {
        display: grid;
        grid-template-rows: 1fr 1fr;
        gap: 10px;
        height: 450px;
    }

    .side-item {
        position: relative;
        overflow: hidden;
    }

    .side-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .overlay-badge {
        position: absolute;
        top: 15px;
        left: 15px;
        background: rgba(0,0,0,0.4);
        color: white;
        padding: 4px 10px;
        border-radius: 4px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .gallery-actions {
        position: absolute;
        top: 15px;
        right: 15px;
        display: flex;
        gap: 10px;
    }

    .btn-action {
        background: white;
        border: none;
        padding: 8px 16px;
        border-radius: 8px;
        font-weight: 700;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        gap: 6px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        cursor: pointer;
        color: var(--text-dark);
        text-transform: uppercase;
    }

    .video-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.2);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .play-btn {
        width: 60px;
        height: 60px;
        background: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: var(--text-dark);
    }

    .more-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 700;
        font-size: 1.5rem;
    }

    .more-overlay span {
        font-size: 1.1rem;
        margin-bottom: -5px;
    }

    @media (max-width: 992px) {
        .grid-gallery { grid-template-columns: 1fr; }
        .gallery-side { display: none; }
        .property-header { flex-direction: column; gap: 1rem; }
        .property-price-box { text-align: left; width: 100%; min-width: auto; }
    }

    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .info-card {
        background: var(--white);
        padding: 1.5rem;
        border-radius: 16px;
        display: flex;
        align-items: center;
        gap: 1rem;
        box-shadow: var(--shadow);
        transition: transform 0.3s;
    }

    .info-card:hover { transform: translateY(-5px); }

    .info-icon {
        width: 50px;
        height: 50px;
        background: #f0f4ff;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary-color);
        font-size: 1.5rem;
    }

    .info-details span { display: block; }
    .info-label { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; }
    .info-value { font-weight: 700; font-size: 1.1rem; }

    .details-section {
        background: var(--white);
        padding: 2.5rem;
        border-radius: 24px;
        margin-bottom: 2rem;
        box-shadow: var(--shadow);
    }

    .section-title {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid #f1f3f9;
        color: var(--secondary-color);
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .description-content{
        padding-left:1rem;
    }

    .amenities-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1.5rem;
    }

    .amenity-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        padding: 1.25rem;
        border: 1px solid #f1f3f9;
        border-radius: 16px;
        transition: all 0.3s;
    }

    .amenity-item:hover { border-color: var(--primary-color); background: #f8f9fc; }
    .amenity-item img { width: 40px; height: 40px; }

    .sidebar-card {
        background: var(--white);
        padding: 1.5rem;
        border-radius: 20px;
        box-shadow: var(--shadow);
        position: sticky;
        top: 100px;
        z-index: 10;
    }

    .sidebar-card h3 { font-size: 1.3rem; font-weight: 700; }
    .sidebar-card .form-control, .sidebar-card .form-select {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
        border-radius: 10px;
        border: 1px solid #e2e8f0;
    }

    .btn-contact {
        width: 100%;
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
        color: white;
        border: none;
        padding: 0.8rem;
        border-radius: 10px;
        font-weight: 700;
        margin-top: 0.5rem;
        transition: all 0.3s;
    }

    .nearby-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
        margin-top: 1.5rem;
    }

    .nearby-item {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem;
        background: #f8fafc;
        border-radius: 12px;
        transition: all 0.3s;
    }

    .nearby-icon {
        width: 40px;
        height: 40px;
        background: white;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary-color);
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        flex-shrink: 0;
    }

    .nearby-info h4 { font-size: 0.95rem; font-weight: 500; margin-bottom: 0.2rem; }
    .nearby-info p { font-size: 0.8rem; color: var(--text-muted); margin: 0; }

    .popular-searches { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
    .search-tag {
        padding: 8px 16px;
        background: #f1f5f9;
        color: #475569;
        border-radius: 30px;
        font-size: 0.85rem;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.2s;
    }
    .search-tag:hover { background: var(--primary-color); color: white; transform: translateY(-2px); }

    /* Utility Classes */
    .mb-1 { margin-bottom: 0.25rem; }
    .mb-2 { margin-bottom: 0.5rem; }
    .mb-3 { margin-bottom: 1rem; }
    .mt-2 { margin-top: 0.5rem; }
    .mt-3 { margin-top: 1rem; }
    .pt-3 { padding-top: 1rem; }
    .border-top { border-top: 1px solid var(--border-color); }
    .d-flex { display: flex; }
    .justify-content-between { justify-content: space-between; }
    .fw-bold { font-weight: 700; }
    .text-muted { color: var(--text-muted); }
    .small { font-size: 0.85rem; }
    .w-100 { width: 100%; }
    
    .btn-brochure {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.6rem 1.2rem;
        border: 2px solid var(--primary-color);
        color: var(--primary-color);
        background: transparent;
        border-radius: 50px;
        font-weight: 700;
        font-size: 0.85rem;
        text-decoration: none;
        transition: all 0.3s;
        cursor: pointer;
        width: 100%;
    }
    
    .btn-brochure:hover {
        background: var(--primary-color);
        color: white;
    }

    /* Gallery Modal Styles */
    .gallery-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.95);
        z-index: 9999;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .gallery-modal.active {
        display: flex;
    }

    .modal-close {
        position: absolute;
        top: 20px;
        right: 30px;
        color: white;
        font-size: 2.5rem;
        cursor: pointer;
        z-index: 10001;
    }

    .modal-main-img {
        max-width: 90%;
        max-height: 70vh;
        object-fit: contain;
        margin-bottom: 20px;
        border-radius: 8px;
    }

    .modal-thumbnails-wrapper {
        width: 100%;
        display:flex;
        justify-content:center;
        padding: 20px 0;
        background: rgba(255, 255, 255, 0.05);
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: thin;
        scrollbar-color: var(--primary-color) rgba(255,255,255,0.1);
    }

    .modal-thumbnails-wrapper::-webkit-scrollbar {
        height: 6px;
    }

    .modal-thumbnails-wrapper::-webkit-scrollbar-track {
        background: rgba(255,255,255,0.1);
    }

    .modal-thumbnails-wrapper::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 10px;
    }

    .modal-thumbnails-container {
        display: inline-flex;
        gap: 15px;
        padding: 0 40px;
    }

    .modal-thumb {
        width: 120px;
        height: 80px;
        object-fit: cover;
        border-radius: 6px;
        cursor: pointer;
        opacity: 0.6;
        transition: all 0.3s;
        border: 2px solid transparent;
    }

    .modal-thumb:hover {
        opacity: 1;
    }

    .modal-thumb.active {
        opacity: 1;
        border-color: var(--primary-color);
        transform: scale(1.05);
    }

    .form-group { margin-bottom: 1rem; }
    .form-control, .form-select {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1px solid var(--border-color);
        border-radius: 10px;
        outline: none;
        transition: border-color 0.3s;
    }
    .form-control:focus, .form-select:focus {
        border-color: var(--primary-color);
    }

    .popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 999;
}   
    .blur{
        filter: blur(6px);
        transition: filter 0.3s ease;
    }

    .pop-up{
        width:500px;
        background: #fff;
        border-radius: 6px;
        position:fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align:center;
        padding:0 30px;
        z-index:1000;
        box-shadow:0 0 15px rgba(0,0,0,0.3);
        visibility: hidden;
    }
    .pop-up i{
        font-size:100px;
        color: #4c5fd7;
        background: #fff;
        margin-top:-50px;
        border-radius:50%;
        box-shadow:0 2px 5px rgba(0,0,0,0.5);
    }
    .pop-up h2{
        font-size:38px;
        font-weight:500;
        margin: 30px 0 10px;
    }

    .pop-up p{
        font-size:16px;
        color:#333;
        margin-bottom:20px;
    }
    .pop-up button{
        width:100%;
        margin-top:20px;
        margin-bottom:20px;
        padding:10px 0;
        background: #4c5fd7;
        color: #fff;
        border:0;
        outline:none;
        font-size:18px;
        border-radius:6px;
        cursor:pointer;
    }

    .modal-backdrop{
        display:none;
        position:fixed;
        inset:0;
        background: rgba(0, 0, 0, 0.7);
        z-index: 999;
    }
    .modal{
        /* display:none; */
        position:fixed;
        inset:0;
        z-index: 1000;
        display:flex;
        align-items:center;
        justify-content:center;
        visibility: hidden;
    }
    .modal-content-prop{
        background:#000;
        width:500px;
        padding:15px 30px 20px;
        border-radius:6px;
        overflow:hidden;
        color:#fff;
    }
    
    .modal-header-prop{
        display:flex;
        justify-content:space-between;
    }
    .modal-header-title{
        display:grid;
        padding:12px 16px;
        background:#000;
    }
    .modal-header-title h2{
        font-size:25px;
        font-weight:500;
    }
    .modal-close-prop{
        text-align:right;
        margin-top:-7px;

    }
    .close-btn{
        text-align:right;
        background:transparent;
        border:none;
        color:#fff;
        font-size:26px;
        cursor:pointer;
    }
    .modal-body{
        padding:16px;
    }
    .enquiry-form {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .enquiry-form input{
        padding:10px;
        border-radius:4px;
        border:none;
        outline:none;
    }
    .enquiry-form button{
        margin-top:15px;
        padding:10px;
        border:none;
        border-radius:10px;
        background:#fff;
        color:#295cab;  
        font-size:20px;
        cursor:pointer;
    }

    .form-container-overlay{
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.7);
        z-index: 999;
    }
    .form-container {
            position: fixed;
            top:18%;
            right:50%;
            transform: translate(50%, -10%);
            z-index: 1000;
            background: white;
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
            padding: 40px;
            max-width: 530px;
            width: 100%;
            visibility: hidden;
        }
        .form-header{
            display: flex;
            justify-content: space-between;
        }
        .form-header-title {
            text-align: center;
            margin-bottom: 12px;
        }

        .form-header-title h1 {
            color: #2c3e80;
            font-size: 28px;
            margin-bottom: 8px;
        }

        .form-header-title p {
            color: #6b7280;
            font-size: 14px;
        }

        .form-group {
            margin-bottom: 1rem;
        }
        .visit-close{
            position:fixed;
            top:3%;
            right:5%;
            text-align:right;
            background:transparent;
            border:none;
            color:#000;
            font-size:26px;
            cursor:pointer;
        }
        label {
            display: block;
            color: #2c3e80;
            font-weight: 600;
            font-size: 14px;
        }

        input[type="text"],
        input[type="email"],
        input[type="tel"],
        select {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            font-size: 15px;
            /* transition: all 0.3s ease; */
            background-color: #f9fafb;
        }

        input[type="text"]:focus,
        input[type="email"]:focus,
        input[type="tel"]:focus,
        select:focus {
            outline: none;
            border-color: #667eea;
            background-color: white;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .radio-group {
            display: grid;
            grid-template-columns: repeat(2,1fr);
            gap: 12px;
        }

        .radio-option {
            display: flex;
            align-items: center;
            padding: 7px 16px;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            cursor: pointer;
            /* transition: all 0.3s ease; */
            background-color: #f9fafb;
        }

        .radio-option:hover {
            border-color: #667eea;
            background-color: white;
        }

        .radio-option input[type="radio"] {
            width: 10px;
            height: 10px;
            border: 2px solid #d1d5db;
            border-radius: 50%;
            margin-right: 12px;
            cursor: pointer;
            position: relative;
            transition: all 0.3s ease;
            flex-shrink: 0;
        }

        .radio-option input[type="radio"]:checked {
            border-color: #667eea;
            border-width: 6px;
        }

        .radio-option input[type="radio"]:checked ~ .radio-label {
            color: #2c3e80;
            font-weight: 600;
        }

        .radio-option:has(input[type="radio"]:checked) {
            border-color: #667eea;
            background-color: #f0f4ff;
        }

        .radio-label {
            color: #4b5563;
            font-size: 15px;
            cursor: pointer;
            flex-grow: 1;
        }

        .submit-btn {
            width: 100%;
            padding: 14px 24px;
            background: linear-gradient(135deg, #667eea 0%, #5568d3 100%);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            /* transition: all 0.3s ease; */
            margin-top: 8px;
        }

        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
        }

        .submit-btn:active {
            transform: translateY(0);
        }

        .required {
            color: #ef4444;
            margin-left: 2px;
        }

        @media (max-width: 480px) {
            .form-container {
                padding: 28px 20px;
            }

            .form-header h1 {
                font-size: 24px;
            }
        }
        /* =========================================================
   MOBILE BROCHURE MODAL FIX
   Express Interest should stay behind brochure modal
   ========================================================= */

@media screen and (max-width: 767px) {

    /* Express Interest background madhe rahil */
    #mainwrapper .content-sidebar,
    #mainwrapper #enquire.sidebar-card {
        z-index: 1 !important;
    }

    /* Brochure dark background */
    #modalBackdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: 99998 !important;
    }

    /* Brochure modal always above Express Interest */
    #enquiryModal {
        position: fixed !important;
        inset: 0 !important;
        z-index: 99999 !important;
    }

    #enquiryModal .modal-content-prop {
        position: relative !important;
        z-index: 100000 !important;
    }
}
/* =========================================================
   MOBILE BROCHURE FORM - NO TOP CROP
   ========================================================= */

@media screen and (max-width: 767px) {

    #enquiryModal {
        position: fixed !important;
        inset: 0 !important;

        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;

        padding: 20px 12px !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        box-sizing: border-box !important;
    }

    #enquiryModal .modal-content-prop {
        width: 100% !important;
        max-width: 500px !important;

        max-height: calc(100vh - 40px) !important;

        margin: 0 auto !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        border-radius: 16px !important;
    }

    #enquiryModal .modal-header-prop {
        flex-shrink: 0 !important;
    }

    #enquiryModal .modal-body {
        overflow: visible !important;
    }
}
/* =========================================================
   MOBILE BROCHURE MODAL - FINAL TOP POSITION FIX
   ========================================================= */

@media screen and (max-width: 767px) {

    #enquiryModal {
        position: fixed !important;

        /* Header खाली modal सुरू होईल */
        top: 84px !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: calc(100vh - 84px) !important;

        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;

        padding: 15px 12px 20px !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        box-sizing: border-box !important;
    }

    #enquiryModal .modal-content-prop {
        width: 100% !important;
        max-width: 500px !important;

        max-height: calc(100vh - 120px) !important;

        margin: 0 auto !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        border-radius: 16px !important;
    }

    #enquiryModal .modal-header-prop {
        position: relative !important;
        flex-shrink: 0 !important;
    }

    #enquiryModal .modal-body {
        overflow: visible !important;
    }
}
/* =========================================================
   BROCHURE MODAL - DESKTOP + MOBILE FINAL FIX
   ========================================================= */

/* Express Interest stays behind modal */
#mainwrapper #enquire.sidebar-card {
    z-index: 100 !important;
}

/* Dark backdrop */
#modalBackdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 99998 !important;
}

/* Brochure modal always above everything */
#enquiryModal {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 99999 !important;
}

/* Modal content */
#enquiryModal .modal-content-prop {
    position: relative !important;
    z-index: 100000 !important;
}
/* =========================================================
   MOBILE BROCHURE MODAL - FINAL FIX
   ========================================================= */

@media screen and (max-width: 767px) {

    /* Modal wrapper */
    #enquiryModal {
        position: fixed !important;

        top: 82px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100% !important;
        height: calc(100dvh - 82px) !important;

        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;

        padding: 12px 10px 20px !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        box-sizing: border-box !important;

        z-index: 99999 !important;
    }


    /* Brochure box */
    #enquiryModal .modal-content-prop {
        position: relative !important;

        width: 100% !important;
        max-width: 500px !important;

        margin: 0 auto !important;

        max-height: none !important;
        height: auto !important;

        overflow: hidden !important;

        border-radius: 16px !important;

        transform: none !important;
    }


    /* Header */
    #enquiryModal .modal-header-prop {
        position: relative !important;

        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;

        padding: 22px 20px 18px !important;

        flex-shrink: 0 !important;
    }


    /* Header title */
    #enquiryModal .modal-header-title {
        padding: 0 !important;
        margin: 0 !important;
    }


    #enquiryModal .modal-header-title h2 {
        font-size: 21px !important;
        line-height: 1.3 !important;
        margin: 0 0 5px !important;
    }


    #enquiryModal .modal-header-title p {
        font-size: 13px !important;
        line-height: 1.4 !important;
        margin: 0 !important;
    }


    /* Close button */
    #enquiryModal .modal-close-prop {
        margin: 0 !important;
        flex-shrink: 0 !important;
    }


    #enquiryModal .close-btn {
        width: 36px !important;
        height: 36px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 22px !important;
    }


    /* Body */
    #enquiryModal .modal-body {
        padding: 20px !important;

        overflow: visible !important;
    }


    /* Form */
    #enquiryModal .enquiry-form {
        width: 100% !important;
    }


    #enquiryModal .form-group {
        width: 100% !important;
        margin-bottom: 16px !important;
    }


    #enquiryModal input {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}


/* =====================================
   PROPERTY GALLERY
===================================== */

.gallery-wrapper {
    width: 100%;
    padding: 14px 22px 16px;
    margin: 0;
    box-sizing: border-box;
    background: #fff;
}

/* Main Image */
.gallery-main {
    position: relative;
    width: 100%;
    height: 465px;
    overflow: hidden;
    border-radius: 10px;
    background: #f4f4f4;
}

.gallery-main #mainImage {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
}

/* Navigation Arrows */
.gallery-main .nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 36px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.gallery-main:hover .nav-arrow {
    opacity: 1;
}

.gallery-main .nav-arrow.left {
    left: 10px;
}

.gallery-main .nav-arrow.right {
    right: 10px;
}

/* Thumbnail Row */
.thumbnail-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    margin-top: 6px;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    box-sizing: border-box;
}

.thumbnail-bar::-webkit-scrollbar {
    display: none;
}

/* Equal thumbnail sizes */
.thumbnail-bar .thumbnail {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    height: 36px;
    display: block;
    padding: 0;
    object-fit: cover;
    object-position: center;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
}

/* Active Thumbnail */
.thumbnail-bar .thumbnail.active {
    border: 2px solid #fff;
    outline: 1px solid #d5dce5;
}

/* =====================================
   TABLET
===================================== */

@media (max-width: 768px) {

    .gallery-wrapper {
        padding: 12px 16px;
    }

    .gallery-main {
        height: 250px;
    }

    .gallery-main .nav-arrow {
        opacity: 1;
    }

    .thumbnail-bar .thumbnail {
        flex: 0 0 58px;
        width: 58px;
        min-width: 58px;
        height: 40px;
    }
}

/* =====================================
   MOBILE
===================================== */

@media (max-width: 480px) {

    .gallery-wrapper {
        padding: 8px 10px 12px;
    }

    .gallery-main {
        height: 220px;
        border-radius: 9px;
    }

    .gallery-main #mainImage {
        border-radius: 9px;
    }

    .gallery-main .nav-arrow {
        width: 30px;
        height: 36px;
        font-size: 24px;
        opacity: 1;
    }

    .thumbnail-bar {
        gap: 5px;
        margin-top: 6px;
    }

    .thumbnail-bar .thumbnail {
        flex: 0 0 58px;
        width: 58px;
        min-width: 58px;
        height: 38px;
    }
}

/* =========================================
   PROPERTY SUMMARY HEADER
========================================= */

.property-summary-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    padding: 21px 20px;
    margin: 0 0 18px;
    background: #fffafd;
    border-left: 3px solid #168cff;
    box-sizing: border-box;
}

/* Left Content */

.property-summary-left {
    flex: 1;
    min-width: 0;
}

.summary-property-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 7px;
    color: #333333;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
}

.summary-property-title > i {
    font-size: 18px;
    color: #454545;
}

.summary-builder {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 400;
    color: #777;
    white-space: nowrap;
}

.summary-builder span {
    font-weight: 600;
    color: #555;
}

/* Location */

.summary-property-location {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    color: #777;
    font-size: 14px;
    line-height: 1.5;
}

.summary-property-location i {
    font-size: 13px;
    color: #666;
}

/* Actions Row */

.summary-actions {
    display: flex;
    align-items: center;
    gap: 156px;
    flex-wrap: wrap;
}

/* Book Visit Button */

.summary-book-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 241px;
    min-height: 39px;
    padding: 8px 14px;
    border: none;
    border-radius: 5px;
    background: #286be5;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.summary-book-btn:hover {
    background: #1857c5;
}

.summary-book-btn i {
    font-size: 10px;
}

/* RERA Badge */

.summary-rera-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 4px;
    background: #eef4ff;
    color: #2872e8;
    font-size: 16px;
    white-space: nowrap;
}

.summary-rera-badge i {
    color: #ff7043;
    font-size: 12px;
}

/* Right Price */

.property-summary-right {
    flex: 0 0 auto;
    text-align: right;
    padding-top: 0;
}

.summary-price {
    color: #454545;
    font-size: 19px;
    font-weight: 750;
    line-height: 1.35;
    white-space: nowrap;
}

.summary-price-star {
    font-size: 13px;
}

.summary-price-caption {
    margin-top: 3px;
    color: #777;
    font-size: 11px;
    white-space: nowrap;
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 768px) {

    .property-summary-card {
        gap: 12px;
        padding: 14px;
    }

    .summary-property-title {
        font-size: 15px;
    }

    .summary-book-btn {
        width: 200px;
    }

    .summary-price {
        font-size: 17px;
    }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 480px) {

    .property-summary-card {
        gap: 8px;
        padding: 12px 10px;
        margin-bottom: 14px;
    }

    .property-summary-left {
        flex: 1;
        min-width: 0;
    }

    .summary-property-title {
        gap: 5px;
        font-size: 14px;
    }

    .summary-builder {
        font-size: 7px;
    }

    .summary-property-location {
        align-items: flex-start;
        gap: 5px;
        font-size: 12px;
        margin-bottom: 12px;
    }

    .summary-actions {
        gap: 8px;
    }

    .summary-book-btn {
        width: 100%;
        max-width: 220px;
        min-height: 34px;
    }

    .summary-rera-badge {
        padding: 6px 7px;
        font-size: 9px;
    }

    .property-summary-right {
        max-width: 44%;
    }

    .summary-price {
        font-size: 14px;
    }

    .summary-price-caption {
        font-size: 10px;
    }
}


/* =========================================
   FLOOR PLAN MAIN SECTION
========================================= */

.dynamic-floor-plan {
    width: 100%;
    margin: 24px 0;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #edf0f5;
    border-radius: 8px;
    box-sizing: border-box;
}

.floor-plan-heading {
    margin-bottom: 20px;
}

.floor-plan-heading h2 {
    margin: 0 0 8px;
    color: #163d78;
    font-size: 23px;
    font-weight: 700;
}

.floor-plan-heading p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
}

/* =========================================
   BHK TABS
========================================= */

.floor-plan-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.floor-plan-tab {
    padding: 10px 22px;
    color: #0645a4;
    background: #ffffff;
    border: 1px solid #cbd8ec;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.floor-plan-tab:hover,
.floor-plan-tab.active {
    color: #ffffff;
    background: #0645a4;
    border-color: #0645a4;
}

/* =========================================
   FLOOR PLAN DRAWING
========================================= */

.auto-floor-plan {
    width: 100%;
    padding: 18px 0 8px;
    background: #ffffff;
    box-sizing: border-box;
}

.auto-floor-plan-title {
    margin-bottom: 10px;
    color: #333333;
    font-size: 16px;
    font-weight: 600;
}

.floor-drawing {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.floor-plan-svg {
    display: block;
    width: 100%;
    height: auto;
}

.plan-wall {
    fill: #f5f4f1;
    stroke: #60666c;
    stroke-width: 3;
}

.plan-room {
    fill: #f5f4f1;
    stroke: #60666c;
    stroke-width: 3;
}

.plan-label {
    fill: #252525;
    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}

.floor-plan-note {
    margin: 12px 0 0;
    color: #777777;
    text-align: center;
    font-size: 12px;
    line-height: 1.6;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 768px) {
    .dynamic-floor-plan {
        padding: 18px;
    }

    .floor-plan-heading h2 {
        font-size: 21px;
    }
}

@media (max-width: 480px) {
    .dynamic-floor-plan {
        margin: 18px 0;
        padding: 14px;
    }

    .floor-plan-heading h2 {
        font-size: 20px;
    }

    .floor-plan-tabs {
        gap: 8px;
        margin-bottom: 16px;
    }

    .floor-plan-tab {
        padding: 9px 14px;
        font-size: 13px;
    }

    .auto-floor-plan {
        padding-top: 10px;
    }

    .plan-label {
        font-size: 15px;
    }
}

/* ==========================================
   QUICK PROPERTY INFO - SCREENSHOT UI
========================================== */

.info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    margin: 18px 0 24px;
    padding: 0;
    background: #ffffff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

/* Individual Item */

.info-grid .info-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    min-height: 88px;
    margin: 0;
    padding: 12px 26px;
    background: #ffffff;
    border: none;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
}

/* Vertical Separator */

.info-grid .info-card:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 18px;
    right: 0;
    width: 1px;
    height: 48px;
    background: #b8c9e5;
}

/* Icon */

.info-grid .info-icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin: 0 0 8px;
    color: #0645a4;
    font-size: 17px;
    line-height: 1;
}

.info-grid .info-icon i {
    color: #0645a4;
}

/* Hide Labels - Match Screenshot */

.info-grid .info-label {
    display: none;
}

/* Dynamic Values */

.info-grid .info-details {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

.info-grid .info-value {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #003f9e;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* ==========================================
   TABLET
========================================== */

@media (max-width: 768px) {
    .info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .info-grid .info-card {
        min-height: 78px;
        padding: 12px 16px;
    }

    /* Remove separator at the end of each row */
    .info-grid .info-card:nth-child(2n)::after {
        display: none;
    }

    .info-grid .info-card:nth-child(-n+2) {
        border-bottom: 1px solid #edf1f8;
    }
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 480px) {
    .info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        margin: 14px 0 20px;
    }

    .info-grid .info-card {
        min-height: 76px;
        padding: 10px 12px;
    }

    .info-grid .info-card:not(:last-child)::after {
        top: 12px;
        height: 48px;
    }

    .info-grid .info-card:nth-child(2n)::after {
        display: none;
    }

    .info-grid .info-icon {
        margin-bottom: 7px;
        font-size: 16px;
    }

    .info-grid .info-value {
        font-size: 12px;
        line-height: 1.5;
    }
}


/* =========================================
   AMENITIES - REFERENCE SCREENSHOT UI
========================================= */

.amenities-section {
    width: 100%;
    margin: 0;
    padding: 20px;
    background: #fff;
    border: none;
    border-radius: 14px;
    box-shadow: 0 3px 12px rgba(35, 60, 110, 0.06);
    box-sizing: border-box;
}

.amenities-main-title,
.amenities-section .section-title {
    margin: 0 0 24px;
    padding: 0;
    color: #383838;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
}

/* Two-column category layout */

.amenities-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 34px;
    row-gap: 26px;
    width: 100%;
    align-items: start;
}

/* Category */

.amenity-category {
    min-width: 0;
    width: 100%;
}

.amenity-category-title {
    margin: 0 0 18px;
    padding: 0;
    color: #383838;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

/* Vertical list */

.amenity-category-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

/* Each amenity must be a horizontal row, NOT a card */

.amenities-section .amenity-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;

    width: 100%;
    min-width: 0;
    min-height: 40px;

    margin: 0;
    padding: 0;

    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;

    box-sizing: border-box;
}

/* Small grey icon square */

.amenities-section .amenity-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 40px;
    width: 40px;
    height: 40px;

    margin: 0;
    padding: 0;

    color: #383838;
    background: #f5f5f5;

    border: none;
    border-radius: 4px;
    box-shadow: none;

    font-size: 16px;
}

/* Icon */

.amenities-section .amenity-icon i {
    color: #383838;
    font-size: 16px;
    line-height: 1;
}

/* Text aligned beside icon */

.amenities-section .amenity-name {
    display: block;
    flex: 1;
    min-width: 0;

    margin: 0;
    padding: 0;

    color: #414141;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;

    text-align: left;
    overflow-wrap: anywhere;
}

/* Remove inherited Bootstrap card styles */

.amenities-section .amenity-item::before,
.amenities-section .amenity-item::after {
    display: none;
    content: none;
}

/* Empty state */

.amenities-section .amenities-empty {
    margin: 0;
    color: #777;
    font-size: 14px;
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 768px) {
    .amenities-section {
        padding: 18px;
    }

    .amenities-grid {
        column-gap: 22px;
        row-gap: 24px;
    }

    .amenities-section .amenity-name {
        font-size: 14px;
    }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 520px) {
    .amenities-section {
        padding: 16px 14px;
        border-radius: 10px;
    }

    .amenities-grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 24px;
    }

    .amenities-section .amenity-category-title {
        margin-bottom: 14px;
        font-size: 15px;
    }

    .amenity-category-list {
        gap: 12px;
    }

    .amenities-section .amenity-item {
        min-height: 38px;
    }

    .amenities-section .amenity-icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
    }
}


 

.nearby-section {
    width: 100%;
    margin: 20px 0;
    padding: 20px 15px;
    background: #ffffff;
    border: none;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(35, 60, 110, 0.06);
    box-sizing: border-box;
}

/* Section heading */

.nearby-section .section-title {
    margin: 0 0 24px;
    color: #383838;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

.nearby-section .section-title i {
    margin-right: 6px;
}

/* Two-column layout */

.nearby-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 34px;
    row-gap: 25px;
    width: 100%;
    align-items: start;
}

/* Category */

.nearby-category {
    min-width: 0;
}

.nearby-category-title {
    margin: 0 0 15px;
    color: #171717;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}

/* List of places */

.nearby-category-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

/* Individual location row */

.nearby-section .nearby-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Place name */

.nearby-place-name {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: #414141;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* Distance */

.nearby-distance {
    flex-shrink: 0;
    color: #414141;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    white-space: nowrap;
}

/* Empty message */

.nearby-empty {
    margin: 0;
    color: #777777;
    font-size: 14px;
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 768px) {
    .nearby-section {
        padding: 18px;
    }

    .nearby-grid {
        column-gap: 22px;
        row-gap: 24px;
    }

    .nearby-place-name,
    .nearby-distance {
        font-size: 14px;
    }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 520px) {
    .nearby-section {
        padding: 16px 14px;
        border-radius: 10px;
    }

    .nearby-section .section-title {
        margin-bottom: 20px;
        font-size: 18px;
    }

    .nearby-grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 23px;
    }

    .nearby-category-title {
        margin-bottom: 12px;
        font-size: 15px;
    }

    .nearby-category-list {
        gap: 11px;
    }

    .nearby-place-name,
    .nearby-distance {
        font-size: 14px;
    }
}


               


/* =========================================
   BUILDER INFORMATION CARD
========================================= */

.popular-searches-section {
    width: 100%;
    margin: 20px 0 40px;
    padding: 0;
    background: transparent;
    box-sizing: border-box;
}

.builder-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    min-height: 104px;
    padding: 24px 22px;
    background: #ffffff;
    border: none;
    border-radius: 15px;
    box-shadow: 0 3px 12px rgba(35, 60, 110, 0.07);
    box-sizing: border-box;
}

/* Builder details */

.builder-details {
    min-width: 0;
}

.builder-details h3 {
    margin: 0 0 4px;
    color: #383838;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

.builder-details p {
    margin: 0;
    color: #414141;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

/* Right-side link */

.builder-project-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
    color: #1769ff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.builder-project-link:hover {
    color: #0645c5;
    text-decoration: none;
}

.builder-project-link i {
    font-size: 12px;
}

/* =========================================
   POPULAR SEARCHES
========================================= */

.popular-searches-content {
    width: 100%;
    margin: 20px 0;
    padding: 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(35, 60, 110, 0.06);
    box-sizing: border-box;
}

.popular-searches-content .section-title {
    margin: 0 0 18px;
    color: #383838;
    font-size: 18px;
    font-weight: 600;
}

.popular-searches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.search-tag {
    display: inline-flex;
    align-items: center;
    padding: 9px 13px;
    color: #414141;
    background: #f7f8fa;
    border: 1px solid #e9edf3;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.search-tag:hover {
    color: #1769ff;
    background: #f0f5ff;
    text-decoration: none;
}

/* =========================================
   MOBILE RESPONSIVE
========================================= */

@media (max-width: 520px) {
    .popular-searches-section {
        margin: 16px 0 28px;
    }

    .builder-info {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
        min-height: auto;
        padding: 20px 16px;
        border-radius: 12px;
    }

    .builder-project-link {
        justify-content: flex-start;
        white-space: normal;
        font-size: 13px;
    }

    .popular-searches-content {
        padding: 16px;
    }

    .popular-searches {
        gap: 8px;
    }

    .search-tag {
        padding: 8px 10px;
        font-size: 12px;
    }
}

        
/* =========================================
   LOCATION AND NEARBY SECTION
========================================= */

.location-nearby-section {
    width: 100%;
    margin: 20px 0;
    padding: 20px 15px;
    background: #ffffff;
    border: none;
    border-radius: 14px;
    box-shadow: 0 3px 12px rgba(35, 60, 110, 0.06);
    box-sizing: border-box;
}

/* Main Heading */

.location-main-title {
    margin: 0 0 20px;
    color: #383838;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

/* Map */

.location-map-wrapper {
    width: 100%;
    margin-bottom: 27px;
    overflow: hidden;
    border-radius: 7px;
}

.location-map-wrapper #map {
    width: 100%;
    height: 230px;
    min-height: 230px;
    border: none;
    border-radius: 7px;
    overflow: hidden;
}

/* Nearby Categories: Two Columns */

.nearby-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 34px;
    row-gap: 25px;
    width: 100%;
}

/* Category */

.nearby-category {
    min-width: 0;
}

.nearby-category-title {
    margin: 0 0 15px;
    color: #171717;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}

/* Nearby List */

.nearby-category-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

/* Place Name and Distance */

.nearby-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.nearby-place-name {
    flex: 1;
    min-width: 0;
    color: #414141;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.nearby-distance {
    flex-shrink: 0;
    color: #414141;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    white-space: nowrap;
}

/* Empty State */

.nearby-empty {
    margin: 0;
    color: #777777;
    font-size: 14px;
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 768px) {
    .location-nearby-section {
        padding: 18px;
    }

    .nearby-grid {
        column-gap: 22px;
        row-gap: 24px;
    }

    .location-map-wrapper #map {
        height: 220px;
        min-height: 220px;
    }

    .nearby-place-name,
    .nearby-distance {
        font-size: 14px;
    }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 520px) {
    .location-nearby-section {
        padding: 16px 14px;
        border-radius: 10px;
    }

    .location-main-title {
        margin-bottom: 16px;
        font-size: 18px;
    }

    .location-map-wrapper {
        margin-bottom: 22px;
    }

    .location-map-wrapper #map {
        height: 200px;
        min-height: 200px;
    }

    .nearby-grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 23px;
    }

    .nearby-category-title {
        margin-bottom: 12px;
        font-size: 15px;
    }

    .nearby-category-list {
        gap: 11px;
    }

    .nearby-place-name,
    .nearby-distance {
        font-size: 14px;
    }
}


/* =========================================
   DOWNLOAD BROCHURE MODAL - UI ONLY
   ========================================= */

#enquiryModal .modal-content-prop {
    max-width: 480px;
    width: 100%;
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #e7ecf4;
    box-shadow: 0 20px 60px rgba(20, 42, 75, 0.18);
}

/* Header */
#enquiryModal .modal-header-prop {
    padding: 25px 26px 22px;
    background: linear-gradient(135deg, #f0f5ff, #ffffff);
    border-bottom: 1px solid #edf0f5;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

#enquiryModal .modal-header-title h2 {
    margin: 0 0 8px;
    color: #183153;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

#enquiryModal .modal-header-title p {
    margin: 0;
    color: #667085;
    font-size: 13px;
    line-height: 1.6;
}

#enquiryModal .modal-close-prop .close-btn {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e4e7ec;
    color: #475467;
    font-size: 22px;
    cursor: pointer;
    transition: 0.25s ease;
}

#enquiryModal .modal-close-prop .close-btn:hover {
    background: #295cab;
    border-color: #295cab;
    color: #ffffff;
}

/* Form body */
#enquiryModal .modal-body {
    padding: 25px 26px 28px;
    background: #ffffff;
}

#enquiryModal .enquiry-form .form-group {
    margin-bottom: 20px;
}

#enquiryModal .enquiry-form .form-group label {
    display: block;
    margin-bottom: 9px;
    color: #344054;
    font-size: 14px;
    font-weight: 600;
}

#enquiryModal .enquiry-form .required {
    color: #e53935;
}

#enquiryModal .enquiry-form .brochure-input {
    display: block;
    width: 100%;
    height: 49px;
    padding: 0 15px;
    border: 1px solid #dce2eb;
    border-radius: 9px;
    background: #ffffff;
    color: #1d2939;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#enquiryModal .enquiry-form .brochure-input::placeholder {
    color: #98a2b3;
}

#enquiryModal .enquiry-form .brochure-input:focus {
    outline: none;
    border-color: #295cab;
    box-shadow: 0 0 0 3px rgba(41, 92, 171, 0.10);
}

/* Information box */
#enquiryModal .brochure-info-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 14px;
    margin: 2px 0 22px;
    background: #f7f9fc;
    border: 1px solid #edf0f5;
    border-radius: 10px;
}

#enquiryModal .brochure-info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #52627a;
    font-size: 12px;
}

#enquiryModal .brochure-info-item i {
    color: #295cab;
    font-size: 15px;
}

/* Download button */
#enquiryModal .brochure-submit-btn {
    width: 100%;
    min-height: 51px;
    padding: 13px 18px;
    border: none;
    border-radius: 9px;
    background: #295cab;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 5px 14px rgba(41, 92, 171, 0.18);
    transition: background 0.25s ease, transform 0.25s ease;
}

#enquiryModal .brochure-submit-btn i {
    margin-right: 7px;
}

#enquiryModal .brochure-submit-btn:hover {
    background: #1f4787;
    transform: translateY(-1px);
}

#enquiryModal .brochure-submit-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

/* Success and error messages */
#enquiryModal #brochureSuccess,
#enquiryModal #brochureError {
    padding: 14px 16px;
    margin-bottom: 20px;
    border-radius: 9px;
    font-size: 13px;
    line-height: 1.6;
}

/* Mobile UI */
@media (max-width: 576px) {
    #enquiryModal {
        padding: 14px;
    }

    #enquiryModal .modal-content-prop {
        max-width: 100%;
        border-radius: 14px;
    }

    #enquiryModal .modal-header-prop {
        padding: 20px 18px;
    }

    #enquiryModal .modal-header-title h2 {
        font-size: 21px;
    }

    #enquiryModal .modal-body {
        padding: 20px 18px 22px;
    }

    #enquiryModal .brochure-info-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    #enquiryModal .enquiry-form .form-group {
        margin-bottom: 17px;
    }
}

/* Fix Download Brochure Header */
#enquiryModal .modal-header-prop {
    background: #f5f8ff !important;
    background-image: none !important;
}

#enquiryModal .modal-header-title {
    background: transparent !important;
    background-color: transparent !important;
    color: #183153 !important;
    width: 100%;
    flex: 1;
}

#enquiryModal .modal-header-title h2 {
    display: block !important;
    width: auto !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #183153 !important;
    padding: 0 !important;
    margin: 0 0 8px !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-transform: none !important;
}

#enquiryModal .modal-header-title p {
    display: block !important;
    width: auto !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #667085 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

#enquiryModal .modal-close-prop {
    flex-shrink: 0;
    background: transparent !important;
}

#enquiryModal .modal-close-prop .close-btn {
    background: #ffffff !important;
    color: #475467 !important;
}

keyframes enquiryMessageFade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile responsive */



/* =========================================
   STICKY SIDEBAR
   ========================================= */

#mainwrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    overflow: visible !important;
}

#mainwrapper .content-main {
    overflow: visible !important;
}

#mainwrapper .content-sidebar {
    position: relative !important;
    overflow: visible !important;
    align-self: stretch !important;
    min-width: 0;
}

#mainwrapper #enquire.sidebar-card {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 100px !important;
    width: 100% !important;
    height: max-content !important;
    align-self: flex-start !important;
    z-index: 10 !important;
    padding: 0 !important;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    box-sizing: border-box;
}


/* =========================================
   FORM CARD - SCREENSHOT STYLE
   ========================================= */

.sidebar-form-box,
.emi-calculator-box {
    width: 100%;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #a5bfff;
    border-radius: 16px;
    box-sizing: border-box;
}

.sidebar-form-box {
    margin-bottom: 14px;
}

.sidebar-form-box h3 {
    margin: 0 0 16px !important;
    color: #383838;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}

.sidebar-form-box .row {
    display: block;
    margin: 0;
}

.sidebar-form-box .form-group {
    width: 100%;
    margin: 0 0 12px;
}

.sidebar-form-box .form-group label {
    display: block;
    margin: 0 0 5px;
    color: #454545;
    font-size: 12px;
    font-weight: 400;
}

.sidebar-form-box .form-control {
    display: block;
    width: 100%;
    min-height: 35px;
    padding: 9px 11px;
    color: #333333;
    background: #ffffff;
    border: 1px solid #dedede;
    border-radius: 6px;
    box-shadow: none;
    font-size: 12px;
    line-height: 1.4;
    box-sizing: border-box;
}

.sidebar-form-box textarea.form-control {
    min-height: 75px;
    resize: vertical;
}

.sidebar-form-box .form-control:focus {
    border-color: #8db1ff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(47, 111, 255, 0.08);
}

/* Preserve the existing Send Message button and classes */

.sidebar-form-box button.full-width {
    display: block;
    width: 100%;
    min-height: 38px;
    padding: 9px 12px;
    color: #1769ff;
    background: #ffffff;
    border: 1px solid #8db1ff;
    border-radius: 7px;
    box-shadow: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.sidebar-form-box button.full-width:hover {
    color: #ffffff;
    background: #1769ff;
}

.sidebar-form-box .project-status h4 {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    color: #383838;
}

.sidebar-form-box .btn-brochure {
    display: block;
    width: 100%;
    padding: 10px 12px;
    color: #1769ff;
    background: #ffffff;
    border: 1px solid #8db1ff;
    border-radius: 7px;
    font-size: 13px;
    cursor: pointer;
}

.sidebar-form-box .btn-brochure:hover {
    color: #ffffff;
    background: #1769ff;
}


/* =========================================
   EMI CALCULATOR CARD
   ========================================= */

.emi-calculator-box {
    margin-bottom: 16px;
}

.emi-heading {
    margin: 0 0 20px;
    color: #383838;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}

.emi-control {
    margin-bottom: 22px;
}

.emi-control-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    margin-bottom: 9px;
}

.emi-control-heading label {
    flex: 1;
    margin: 0;
    color: #333333;
    font-size: 12px;
    font-weight: 500;
}

.emi-control-heading input {
    width: 95px;
    min-width: 0;
    padding: 0;
    color: #333333;
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    text-align: right;
}

.emi-control-heading input[type="number"] {
    width: 45px;
    appearance: textfield;
    -moz-appearance: textfield;
}

.emi-control-heading input[type="number"]::-webkit-inner-spin-button,
.emi-control-heading input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.emi-editable-value {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    white-space: nowrap;
}

.emi-editable-value span {
    color: #333333;
    font-size: 12px;
}

/* Sliders */

.emi-slider {
    display: block;
    width: 100%;
    height: 4px;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    background: #d5f1fa;
    border: none;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
}

.emi-slider::-webkit-slider-thumb {
    width: 11px;
    height: 11px;
    appearance: none;
    -webkit-appearance: none;
    background: #2879ed;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.emi-slider::-moz-range-thumb {
    width: 11px;
    height: 11px;
    background: #2879ed;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.emi-limits {
    display: flex;
    justify-content: space-between;
    margin-top: 9px;
    color: #555555;
    font-size: 10px;
}

/* Monthly EMI */

.emi-output {
    margin: 2px 0 24px;
}

.emi-output-label {
    margin-bottom: 7px;
    color: #1769ff;
    font-size: 13px;
}

.emi-output-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 42px;
    padding: 8px;
    color: #1769ff;
    background: #ffffff;
    border: 1px solid #a5bfff;
    border-radius: 7px;
    box-sizing: border-box;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}

.emi-month-text {
    font-weight: 400;
}

/* Breakdown bar */

.emi-breakdown-bar {
    display: flex;
    width: 100%;
    height: 5px;
    margin-bottom: 11px;
    overflow: hidden;
    background: #eeeeee;
}

.emi-principal-bar {
    width: 50%;
    background: #5076f6;
    transition: width 0.2s ease;
}

.emi-interest-bar {
    width: 50%;
    background: #8a43ed;
    transition: width 0.2s ease;
}

.emi-breakdown-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.emi-breakdown-column {
    min-width: 0;
}

.emi-align-right {
    text-align: right;
}

.emi-breakdown-label {
    display: block;
    margin-bottom: 2px;
    color: #777777;
    font-size: 11px;
    line-height: 1.4;
}

.emi-breakdown-column strong {
    color: #5076f6;
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.emi-align-right strong {
    color: #8a43ed;
}

.emi-breakdown-column small {
    color: #5076f6;
    font-size: 10px;
}

.emi-align-right small {
    color: #8a43ed;
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (min-width: 993px) {
    #mainwrapper {
        align-items: stretch !important;
        overflow: visible !important;
    }

    #mainwrapper .content-main,
    #mainwrapper .content-sidebar {
        overflow: visible !important;
    }

    #mainwrapper #enquire.sidebar-card {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 100px !important;
    }
}

@media (max-width: 992px) {
    #mainwrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        overflow: visible !important;
    }

    #mainwrapper .content-main,
    #mainwrapper .content-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    #mainwrapper .content-sidebar {
        position: relative !important;
        align-self: stretch !important;
    }

    #mainwrapper #enquire.sidebar-card {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        height: max-content !important;
    }
}

@media (max-width: 520px) {
    .sidebar-form-box,
    .emi-calculator-box {
        padding: 18px;
        border-radius: 14px;
    }

    .emi-breakdown-row {
        gap: 7px;
    }

    .emi-breakdown-column strong {
        font-size: 12px;
    }
}

/* Remove background blur when Book a Visit opens */
#mainwrapper.blur,
#mainwrapper.blur * {
    filter: none !important;
    -webkit-filter: none !important;
}

/* Keep the page readable behind the form */
.form-container-overlay {
    background: rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
        

#map {
    width: 100%;
    height: 400px;
    min-height: 400px;
    display: block;
    position: relative;
    z-index: 1;
}
.nearby-section {
    width: 100%;
    margin: 20px 0;
    padding: 20px 15px;
    background: #ffffff;
    border: none;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(35, 60, 110, 0.06);
    box-sizing: border-box;
}

/* Section heading */

.nearby-section .section-title {
    margin: 0 0 24px;
    color: #383838;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

.nearby-section .section-title i {
    margin-right: 6px;
}

/* Two-column layout */

.nearby-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 34px;
    row-gap: 25px;
    width: 100%;
    align-items: start;
}

/* Category */

.nearby-category {
    min-width: 0;
}

.nearby-category-title {
    margin: 0 0 15px;
    color: #171717;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}

/* List of places */

.nearby-category-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

/* Individual location row */

.nearby-section .nearby-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Place name */

.nearby-place-name {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: #414141;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* Distance */

.nearby-distance {
    flex-shrink: 0;
    color: #414141;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    white-space: nowrap;
}

/* Empty message */

.nearby-empty {
    margin: 0;
    color: #777777;
    font-size: 14px;
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 768px) {
    .nearby-section {
        padding: 18px;
    }

    .nearby-grid {
        column-gap: 22px;
        row-gap: 24px;
    }

    .nearby-place-name,
    .nearby-distance {
        font-size: 14px;
    }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 520px) {
    .nearby-section {
        padding: 16px 14px;
        border-radius: 10px;
    }

    .nearby-section .section-title {
        margin-bottom: 20px;
        font-size: 18px;
    }

    .nearby-grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 23px;
    }

    .nearby-category-title {
        margin-bottom: 12px;
        font-size: 15px;
    }

    .nearby-category-list {
        gap: 11px;
    }

    .nearby-place-name,
    .nearby-distance {
        font-size: 14px;
    }
}



/* ================= HERO BANNER ================= */
section.jfinHero#home {
    width: 100%;
    overflow: hidden;
}

section.jfinHero#home .jfinHeroSlide {
    width: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

section.jfinHero#home .jfinHeroContent {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 550px;
    padding: 40px 7%;
    box-sizing: border-box;
}

/* Transparent black background behind text */
section.jfinHero#home .jfinHeroText {
    width: 100%;
    max-width: 720px;
    padding: 25px 30px;
    /* background: rgba(0, 0, 0, 0.45); */
    border-radius: 10px;
    box-sizing: border-box;
}

/* All text white */
section.jfinHero#home .jfinHeroLabel,
section.jfinHero#home .jfinHeroTitle,
section.jfinHero#home .jfinHeroTitle span,
section.jfinHero#home .jfinHeroDescription {
    color: #ffffff !important;
}

section.jfinHero#home .jfinHeroTitle {
    font-weight: 700;
    line-height: 1.2;
}

section.jfinHero#home .jfinHeroTitle span {
    display: block;
}

section.jfinHero#home .jfinHeroDescription {
    line-height: 1.7;
}

/* Button */
section.jfinHero#home .jfinHeroButtons {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}

section.jfinHero#home .jfinHeroButtons a.jfinHeroBtn.jfinHeroApply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 154px;
    min-width: 158px;
    height: 51px;
    padding: 0 15px;
    box-sizing: border-box;

    background: #3069e8 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: none;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
}

/* Reduce button size on mobile only */
@media (max-width: 480px) {
    section.jfinHero#home .jfinHeroButtons a.jfinHeroBtn.jfinHeroApply {
        width: 130px !important;
        min-width: 100px !important;
        height: 40px !important;
        padding: 0 10px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
    }
}

/* Fix white space above mobile hero banner */
@media (max-width: 768px) {

    section.jfinHero#home {
        width: 100% !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        overflow: hidden !important;
        background: #17232b !important;
    }

    section.jfinHero#home .jfinHeroSlider {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    section.jfinHero#home .jfinHeroSlide {
        margin: 0 !important;
        padding: 0 !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    section.jfinHero#home .jfinHeroContent {
        min-height: 400px !important;
        margin: 0 !important;
        padding: 14px !important;
    }

    /* Prevent extra space from the first heading */
    section.jfinHero#home .jfinHeroText {
        margin-top: 0 !important;
    }

    section.jfinHero#home .jfinHeroLabel {
        margin-top: 0 !important;
    }
}

/* Fix white patches on mobile hero banner */
@media (max-width: 768px) {

    html,
    body {
        overflow-x: hidden;
    }

    section.jfinHero#home {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #17232b !important;
        line-height: normal;
    }

    section.jfinHero#home .jfinHeroSlider {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #17232b !important;
    }

    section.jfinHero#home .jfinHeroSlide {
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-color: #17232b !important;
    }

    section.jfinHero#home .jfinHeroContent {
        display: flex !important;
        align-items: flex-start !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 14px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    section.jfinHero#home .jfinHeroText {
        margin: 0 !important;
        max-width: 100% !important;
    }
}
@media (max-width: 767px) {
    .jfinHeroLabel {
        margin-top: 17px !important;
    }
}

/* ================= TABLET ================= */
@media (max-width: 768px) {
    section.jfinHero#home .jfinHeroContent {
        min-height: 420px;
        padding: 20px;
    }

    section.jfinHero#home .jfinHeroText {
        max-width: 100%;
        padding: 18px;
        /* background: rgba(0, 0, 0, 0.58); */
        border-radius: 8px;
    }

    section.jfinHero#home .jfinHeroTitle {
        font-size: 28px;
        line-height: 1.2;
    }

    section.jfinHero#home .jfinHeroDescription {
        font-size: 14px;
        line-height: 1.5;
    }

    section.jfinHero#home .jfinHeroButtons a.jfinHeroBtn.jfinHeroApply {
        width: 150px;
        min-width: 150px;
        height: 52px;
        font-size: 18px;
    }
}

/* ================= MOBILE / IPHONE ================= */
@media (max-width: 480px) {
    section.jfinHero#home .jfinHeroSlide {
        background-position: 58% center;
    }

    section.jfinHero#home .jfinHeroContent {
        min-height: 400px;
        padding: 14px;
    }

    section.jfinHero#home .jfinHeroText {
        padding: 15px;
        /* background: rgba(0, 0, 0, 0.62); */
        border-radius: 8px;
    }

    section.jfinHero#home .jfinHeroLabel {
        font-size: 10px;
        letter-spacing: 2px;
    }

    section.jfinHero#home .jfinHeroTitle {
        font-size: 24px;
        line-height: 1.25;
        margin: 10px 0;
    }

    section.jfinHero#home .jfinHeroDescription {
        font-size: 12px;
        line-height: 1.5;
        margin-bottom: 12px;
    }

    section.jfinHero#home .jfinHeroButtons {
        margin-top: 15px;
    }

    section.jfinHero#home .jfinHeroButtons a.jfinHeroBtn.jfinHeroApply {
        width: 135px;
        min-width: 135px;
        height: 48px;
        font-size: 16px;
        border-radius: 10px !important;
    }
}

/* Extra-small mobile screens */
@media (max-width: 360px) {
    section.jfinHero#home .jfinHeroContent {
        min-height: 380px;
        padding: 10px;
    }

    section.jfinHero#home .jfinHeroText {
        padding: 12px;
    }

    section.jfinHero#home .jfinHeroTitle {
        font-size: 21px;
    }

    section.jfinHero#home .jfinHeroDescription {
        font-size: 11px;
    }
}


/* contact css */

/* ===============================
   CONTACT SECTION
================================ */

.jfin-contact {
    width: 100%;
    padding: 50px 25px 55px;
    background: #f9fbfd;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

.jfin-contact *,
.jfin-contact *::before,
.jfin-contact *::after {
    box-sizing: border-box;
}

.jfin-contact-container {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.95fr);
    gap: 65px;
    align-items: start;
}

/* LEFT INFO GRID */

.jfin-contact-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 14px;
}

.jfin-contact-info-card {
    min-height: 90px;
    padding: 15px 16px;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    background: #fff;
    transition: box-shadow 0.25s ease;
}

.jfin-contact-info-card:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

.jfin-contact-info-card h4 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 8px;
    color: #424242;
    font-size: 18px;
    font-weight: 600;
}

.jfin-contact-info-card h4 i {
    font-size: 15px;
    color: #4c4c4c;
}

.jfin-contact-info-card p {
    margin: 0;
    color: #666;
    font-size: 14px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.jfin-contact-info-card a {
    color: inherit;
    text-decoration: none;
}

.jfin-contact-info-card a:hover {
    color: #2870e8;
}

/* MAP */

.jfin-contact-map {
    width: 100%;
    height: 269px;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #e1e5eb;
    background: #fff;
    margin-top: 14px;
}

.jfin-contact-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* SOCIAL MEDIA */

.jfin-contact-social {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
    padding: 10px 12px;
    margin-top: 14px;
    border-radius: 9px;
    background: #fff;
}

.jfin-contact-social strong {
    margin-right: 3px;
    color: #444;
    font-size: 14px;
    font-weight: 700;
}

.jfin-contact-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    text-decoration: none;
}

.jfin-contact-social a:nth-of-type(1) {
    color: #1877f2;
}

.jfin-contact-social a:nth-of-type(2) {
    color: #1da1f2;
}

.jfin-contact-social a:nth-of-type(3) {
    color: #0a66c2;
}

.jfin-contact-social a:nth-of-type(4) {
    color: #e4405f;
}

/* CONTACT FORM CARD */

.jfin-contact-form-card {
    width: 142%;
    padding: 20px 17px 17px;
    border-radius: 13px;
    background: #fff;
    border: 1px solid #edf3f5;
    box-shadow: 0 2px 9px rgba(34, 94, 105, 0.10);
}

.jfin-contact-form-card h3 {
    margin: 0 0 20px;
    color: #333;
    font-size: 14px;
    font-weight: 700;
}

.jfin-form-group {
    margin-bottom: 12px;
}

.jfin-form-group label {
    display: block;
    margin-bottom: 5px;
    color: #333;
    font-size: 14px;
    font-weight: 500;
}

.jfin-form-group input,
.jfin-form-group textarea {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 10px;
    border: 1px solid #dedede;
    border-radius: 6px;
    outline: none;
    background: #fafafa;
    color: #333;
    font-family: inherit;
    font-size: 10px;
    transition: border-color 0.2s ease;
}

.jfin-form-group input {
    height: 35px;
}

.jfin-form-group textarea {
    height: 70px;
    resize: vertical;
}

.jfin-form-group input:focus,
.jfin-form-group textarea:focus {
    border-color: #2870e8;
    background: #fff;
}

.jfin-form-group input::placeholder,
.jfin-form-group textarea::placeholder {
    color: #999;
}

.jfin-contact-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 0 14px;
}

.jfin-contact-consent input {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin: 2px 0 0;
    cursor: pointer;
    accent-color: #2870e8;
}

.jfin-contact-consent label {
    color: #777;
    font-size: 12px;
    line-height: 1.45;
    cursor: pointer;
}

.jfin-contact-submit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 34px;
    padding: 9px 15px;
    border: 0;
    border-radius: 5px;
    background: #2870e8;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.jfin-contact-submit:hover {
    background: #185bc8;
}

/* TABLET RESPONSIVE */

@media (max-width: 900px) {
    .jfin-contact-container {
        grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.9fr);
        gap: 25px;
    }

    .jfin-contact {
        padding: 40px 20px;
    }

    .jfin-contact-info-grid {
        gap: 12px;
    }
}

/* MOBILE RESPONSIVE */

@media (max-width: 650px) {
    .jfin-contact {
        padding: 30px 16px;
    }

    .jfin-contact-container {
        grid-template-columns: minmax(0, 1fr);
        gap: 25px;
    }

    .jfin-contact-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .jfin-contact-info-card {
        min-height: 100px;
        padding: 13px 11px;
    }

    .jfin-contact-info-card h4 {
        gap: 6px;
        font-size: 12px;
    }

    .jfin-contact-info-card h4 i {
        font-size: 13px;
    }

    .jfin-contact-info-card p {
        font-size: 11px;
        line-height: 1.6;
    }

    .jfin-contact-map {
        height: 200px;
    }

    .jfin-contact-social {
        gap: 12px;
    }

    .jfin-contact-form-card {
        max-width: 100%;
        padding: 22px 18px;
    }

    .jfin-contact-form-card h3 {
        font-size: 17px;
        margin-bottom: 20px;
    }

    .jfin-form-group label {
        font-size: 12px;
    }

    .jfin-form-group input {
        height: 42px;
        font-size: 13px;
    }

    .jfin-form-group textarea {
        height: 100px;
        font-size: 13px;
    }

    .jfin-contact-consent label {
        font-size: 11px;
    }

    .jfin-contact-submit {
        min-height: 44px;
        font-size: 14px;
    }
}

/* SMALL MOBILE */

@media (max-width: 360px) {
    .jfin-contact-info-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .jfin-contact-info-card {
        min-height: auto;
    }

    .jfin-contact-social {
        gap: 10px;
    }
}
/* refer nd earn */

        /* ----- RESET & BASE ----- */
       
        .jf-modern {
            max-width: 100%;
            overflow-x: hidden;
        }
        .jf-container {
            width: min(1180px, calc(100% - 40px));
            margin: 0 auto;
        }
        /* buttons & common */
        .jf-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 12px 28px;
            border-radius: 60px;
            font-weight: 700;
            font-size: 0.95rem;
            text-decoration: none;
            transition: 0.2s;
            border: 2px solid transparent;
            cursor: pointer;
            min-height: 50px;
        }
        .jf-btn-primary {
            background: #1769e0;
            color: #fff;
            border-color: #1769e0;
        }
        .jf-btn-primary:hover {
            background: #0d4fb3;
            border-color: #0d4fb3;
        }
        .jf-btn-outline {
            background: transparent;
            color: #071b33;
            border-color: #cbd9e8;
        }
        .jf-btn-outline:hover {
            border-color: #1769e0;
            color: #1769e0;
            background: #f2f8ff;
        }
        .jf-footnote {
            font-size: 0.8rem;
            color: #718096;
            margin-top: 20px;
        }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.75rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            color: #1769e0;
            background: #eaf3ff;
            padding: 6px 14px;
            border-radius: 40px;
        }

        /* =========================================================
           JFINMATE HERO BANNER - DESKTOP / TABLET / MOBILE
           ========================================================= */

        #home.hero {
            width: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            position: relative;
        }

        #home .hero-slider {
            width: 100%;
            margin: 0;
            padding: 0;
            position: relative;
        }

        #home .hero-slider .slide {
            width: 100%;
            height: 78vh;
            min-height: 600px;
            max-height: 800px;
            position: relative;
            display: flex;
            align-items: center;
            overflow: hidden;
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
        }

        #home .hero-slider .slide::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            background: linear-gradient(
                90deg,
                rgba(255,255,255,0.96) 0%,
                rgba(255,255,255,0.88) 28%,
                rgba(255,255,255,0.48) 55%,
                rgba(255,255,255,0.10) 78%,
                rgba(255,255,255,0) 100%
            );
        }

        #home .hero-content {
            width: min(1180px, calc(100% - 40px));
            height: 100%;
            margin: 0 auto;
            padding: 50px 0;
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            text-align: left;
            box-sizing: border-box;
        }

        #home .hero-intro {
            display: block;
            margin: 0 0 14px;
            color: #295cab;
            font-size: 15px;
            line-height: 1.4;
            font-weight: 800;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        #home .hero-content h1 {
            width: 100%;
            max-width: 720px;
            margin: 0 0 20px;
            color: #1a1a2e;
            font-size: clamp(42px, 5vw, 68px);
            line-height: 1.08;
            font-weight: 800;
            letter-spacing: -1.5px;
        }

        #home .hero-content h1 span {
            color: #295cab !important;
        }

        #home .hero-content > p {
            width: 100%;
            max-width: 650px;
            margin: 0 0 30px;
            color: #4a5568;
            font-size: 17px;
            line-height: 1.75;
        }

        #home .hero-btns {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-wrap: wrap;
            gap: 14px;
            width: auto;
        }

        #home .hero-btns .btn {
            min-height: 52px;
            padding: 13px 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50px;
            font-size: 15px;
            font-weight: 700;
            line-height: 1.2;
            text-decoration: none;
            box-sizing: border-box;
            transition: all 0.25s ease;
        }

        #home .hero-btns .btn-primary-hero {
            background: #295cab;
            color: #ffffff;
            border: 2px solid #295cab;
        }

        #home .hero-btns .btn-primary-hero:hover {
            background: #1e4789;
            border-color: #1e4789;
            color: #ffffff;
            transform: translateY(-2px);
        }

        #home .hero-btns .btn-outline {
            background: rgba(255,255,255,0.92);
            color: #295cab;
            border: 2px solid #295cab;
        }

        #home .hero-btns .btn-outline:hover {
            background: #295cab;
            color: #ffffff;
            transform: translateY(-2px);
        }

        /* TABLET */
        @media (max-width: 991px) {
            #home .hero-slider .slide {
                height: 620px;
                min-height: 620px;
            }

            #home .hero-content {
                width: min(100% - 50px, 760px);
            }

            #home .hero-content h1 {
                max-width: 620px;
                font-size: clamp(40px, 6vw, 56px);
            }

            #home .hero-content > p {
                max-width: 580px;
                font-size: 16px;
            }
        }

        /* MOBILE */
      /* =========================================================
   HERO - MOBILE FIX
   ========================================================= */




/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    #home .hero-slider .slide {
        min-height: 590px;
        height: 590px;

        /*
         * More right-side image visible.
         */
        background-size: auto 100%;
        background-position: 92% center;
    }

    #home .hero-content {
        min-height: 590px;
        height: 590px;

        padding: 40px 10px;
    }

    #home .hero-intro {
        font-size: 10px;
        letter-spacing: 1.2px;
    }

    #home .hero-content h1 {
        width: 72%;
        max-width: 300px;

        font-size: 29px;
        line-height: 1.15;
    }

    #home .hero-content > p {
        width: 69%;
        max-width: 300px;

        font-size: 12.5px;
        line-height: 1.6;
    }

    #home .hero-btns {
        width: 65%;
        max-width: 285px;
    }

    #home .hero-btns .btn {
        min-height: 50px;
        font-size: 13px;
    }
}
        /* SMALL MOBILE */
        @media (max-width: 480px) {
            #home .hero-slider .slide {
                min-height: 590px;
                background-position: 68% center;
            }

            #home .hero-content {
                min-height: 590px;
                padding: 45px 16px;
            }

            #home .hero-intro {
                font-size: 10px;
                letter-spacing: 1.2px;
            }

            #home .hero-content h1 {
                font-size: 30px;
                line-height: 1.15;
            }

            #home .hero-content > p {
                font-size: 13px;
                line-height: 1.65;
            }

            #home .hero-btns {
                max-width: 310px;
            }

            #home .hero-btns .btn {
                min-height: 48px;
                font-size: 13px;
            }
        }

        /* ===== OTHER SECTIONS (JFINMATE MODERN) ===== */
        :root {
            --jf-navy: #071b33;
            --jf-blue: #1769e0;
            --jf-blue-dark: #0d4fb3;
            --jf-sky: #eaf3ff;
            --jf-light: #f6f9fd;
            --jf-text: #26364a;
            --jf-muted: #718096;
            --jf-border: #e3ebf5;
            --jf-white: #ffffff;
            --jf-success: #18a66b;
        }

        .jf-modern .jf-section-heading {
            max-width: 700px;
            margin: 0 auto 55px;
            text-align: center;
        }
        .jf-modern .jf-section-heading h2 {
            font-size: clamp(30px, 4vw, 44px);
            font-weight: 800;
            color: var(--jf-navy);
            margin: 15px 0;
        }
        .jf-modern .jf-section-heading p {
            color: var(--jf-muted);
            font-size: 1rem;
            line-height: 1.8;
        }

        /* why */
        .jf-why {
            padding: 100px 0;
            background: var(--jf-light);
            position: relative;
        }
        .jf-why-wrap {
            display: grid;
            grid-template-columns: 1.2fr 0.8fr;
            gap: 70px;
            align-items: center;
        }
        .jf-why-content h2 {
            font-size: clamp(32px, 4vw, 48px);
            font-weight: 800;
            color: var(--jf-navy);
            line-height: 1.12;
            margin: 20px 0 20px;
        }
        .jf-why-content h2 span { color: var(--jf-blue); }
        .jf-why-content p {
            color: var(--jf-muted);
            line-height: 1.85;
            margin-bottom: 16px;
        }
        .jf-why-points {
            display: grid;
            grid-template-columns: repeat(2,1fr);
            gap: 14px;
            margin-top: 30px;
        }
        .jf-why-point {
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 700;
            color: var(--jf-navy);
            font-size: 0.9rem;
        }
        .jf-why-point i {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #e4f7ef;
            color: var(--jf-success);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .jf-reward-box {
            background: #295cab;
            border-radius: 35px;
            padding: 45px;
            color: #fff;
            min-height: 360px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            overflow: hidden;
        }
        .jf-reward-icon {
            width: 72px;
            height: 72px;
            border-radius: 20px;
            background: rgba(255,255,255,0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
        }
        .jf-reward-box h3 {
            font-size: 28px;
            line-height: 1.2;
            margin: 30px 0 12px;
        }
        .jf-reward-box p { color: rgba(255,255,255,0.7); }
        .jf-reward-tag {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #1769e0;
            padding: 10px 18px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 0.85rem;
            width: fit-content;
        }

        /* journey */
        .jf-journey {
            padding: 100px 0;
            background: #fff;
        }
        .jf-journey-grid {
            display: grid;
            grid-template-columns: repeat(2,1fr);
            gap: 25px;
        }
        .jf-journey-card {
            border: 1px solid var(--jf-border);
            border-radius: 28px;
            padding: 38px;
            background: #fff;
            transition: 0.25s;
            position: relative;
        }
        .jf-journey-card:hover {
            transform: translateY(-7px);
            box-shadow: 0 25px 60px rgba(17,51,89,0.08);
            border-color: #cfe1fa;
        }
        .jf-card-number {
            position: absolute;
            right: 25px;
            top: 20px;
            font-size: 70px;
            font-weight: 900;
            color: #f1f6fc;
            line-height: 1;
        }
        .jf-journey-icon {
            width: 62px;
            height: 62px;
            border-radius: 18px;
            background: #eaf3ff;
            color: var(--jf-blue);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 25px;
            margin-bottom: 25px;
        }
        .jf-journey-card h3 {
            font-size: 25px;
            color: var(--jf-navy);
            margin-bottom: 14px;
        }
        .jf-journey-card > p { color: var(--jf-muted); }
        .jf-benefits {
            list-style: none;
            margin: 25px 0 30px;
        }
        .jf-benefits li {
            display: flex;
            gap: 11px;
            margin-bottom: 12px;
            color: #44556b;
            font-size: 0.9rem;
        }
        .jf-benefits li i { color: var(--jf-success); margin-top: 3px; }

        /* process */
        .jf-process {
            padding: 100px 0;
            background: var(--jf-navy);
            color: #fff;
        }
        .jf-process .eyebrow {
            background: rgba(255,255,255,0.09);
            color: #8ebfff;
        }
        .jf-process .jf-section-heading h2 { color: #fff; }
        .jf-process .jf-section-heading p { color: rgba(255,255,255,0.6); }
        .jf-process-intro {
            max-width: 900px;
            margin: 0 auto 65px;
            padding: 28px 32px;
            border-left: 3px solid var(--jf-blue);
            background: rgba(255,255,255,0.05);
            border-radius: 0 16px 16px 0;
        }
        .jf-process-intro p { color: rgba(255,255,255,0.72); }
        .jf-steps {
            display: grid;
            grid-template-columns: repeat(5,1fr);
            gap: 20px;
        }
        .jf-step-number {
            width: 54px;
            height: 54px;
            border-radius: 50%;
            background: #1769e0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 1rem;
            margin-bottom: 20px;
            box-shadow: 0 0 0 8px rgba(23,105,224,0.12);
        }
        .jf-step h4 { color: #fff; font-size: 1.1rem; margin-bottom: 8px; }
        .jf-step p { color: rgba(255,255,255,0.55); font-size: 0.85rem; }

        /* prefer */
        .jf-prefer {
            padding: 100px 0;
            background: var(--jf-light);
        }
        .jf-prefer-grid {
            display: grid;
            grid-template-columns: repeat(4,1fr);
            gap: 15px;
        }
        .jf-prefer-item {
            background: #fff;
            border: 1px solid var(--jf-border);
            border-radius: 18px;
            padding: 25px 20px;
            min-height: 120px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 12px;
            transition: 0.2s;
        }
        .jf-prefer-item:hover {
            transform: translateY(-4px);
            box-shadow: 0 15px 35px rgba(17,51,89,0.06);
        }
        .jf-prefer-item i { font-size: 24px; color: var(--jf-blue); }
        .jf-prefer-item span { font-weight: 700; color: var(--jf-navy); }

        /* faq */
        .jf-faq {
            padding: 100px 0;
            background: #fff;
        }
        .jf-faq-layout {
            display: grid;
            grid-template-columns: 0.7fr 1.3fr;
            gap: 70px;
            align-items: start;
        }
        .jf-faq-side h2 {
            font-size: 38px;
            color: var(--jf-navy);
            margin: 14px 0;
        }
        .jf-faq-side p { color: var(--jf-muted); }
        .jf-faq-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .jf-faq-item {
            border: 1px solid var(--jf-border);
            border-radius: 15px;
            padding: 20px 23px;
            background: #fff;
        }
        .jf-faq-item h4 {
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--jf-navy);
            font-size: 1rem;
            margin-bottom: 8px;
        }
        .jf-faq-item h4 i { color: var(--jf-blue); }
        .jf-faq-item p {
            color: var(--jf-muted);
            font-size: 0.9rem;
            line-height: 1.7;
            margin-left: 27px;
        }

        /* final cta */
        .jf-final {
            padding: 100px 0;
            background: #295cab;
            color: #fff;
            text-align: center;
        }
        .jf-final-content .eyebrow {
            background: rgba(255,255,255,0.08);
            color: #86b9ff;
        }
        .jf-final-content h2 {
            font-size: clamp(32px,5vw,52px);
            margin: 16px 0;
        }
        .jf-final-content p { color: rgba(255,255,255,0.7); max-width: 650px; margin: 0 auto; }
        .jf-final-buttons {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 14px;
            margin-top: 30px;
        }
        .jf-final .jf-btn-primary {
            background: #fff;
            color: var(--jf-navy);
            border-color: #fff;
        }
        .jf-final .jf-btn-primary:hover { background: #eaf3ff; }
        .jf-final .jf-btn-outline {
            border-color: rgba(255,255,255,0.25);
            color: #fff;
        }
        .jf-final .jf-btn-outline:hover { background: rgba(255,255,255,0.1); }
        .jf-brand-line {
            margin-top: 40px !important;
            opacity: 0.5;
            font-size: 0.9rem;
        }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 991px) {
            .jf-why-wrap, .jf-faq-layout {
                grid-template-columns: 1fr;
                gap: 45px;
            }
            .jf-steps { grid-template-columns: repeat(2,1fr); }
            .jf-prefer-grid { grid-template-columns: repeat(2,1fr); }
            .jf-faq-side { text-align: center; }
        }
        @media (max-width: 767px) {
            .jf-why, .jf-journey, .jf-process, .jf-prefer, .jf-faq, .jf-final {
                padding: 70px 0;
            }
            .jf-journey-grid { grid-template-columns: 1fr; }
            .jf-why-points { grid-template-columns: 1fr; }
            .jf-steps { grid-template-columns: 1fr; }
            .jf-step {
                display: grid;
                grid-template-columns: 55px 1fr;
                gap: 12px;
            }
            .jf-step-number { grid-row: span 2; margin: 0; }
            .jf-faq-item p { margin-left: 0; margin-top: 8px; }
            .jf-prefer-grid { grid-template-columns: 1fr 1fr; }
            .jf-final-buttons { flex-direction: column; align-items: center; }
            .jf-final-buttons .jf-btn { width: 100%; max-width: 340px; }
        }
        @media (max-width: 480px) {
            .jf-prefer-grid { grid-template-columns: 1fr; }
            .jf-reward-box { padding: 28px; }
            .jf-journey-card { padding: 24px 20px; }
        }

        /* =========================================================
   JFINMATE HERO
   DESKTOP + TABLET + MOBILE
   ========================================================= */

.jf-hero {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
    background: #eef6ff;
}

.jf-hero-inner {
    width: 100%;
    min-height: 680px;
    height: 680px;

    position: relative;
    overflow: hidden;

    background: #eef6ff;
}


/* =========================================================
   HERO IMAGE
   ========================================================= */

.jf-hero-image {
    position: absolute;

    width: auto;
    height: 100%;

    max-width: none;

    right: 0;
    top: 0;

    object-fit: contain;
    object-position: right center;

    z-index: 1;

    display: block;
}


/* =========================================================
   OVERLAY
   ========================================================= */

.jf-hero-overlay {
    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 68%;

    z-index: 2;

    pointer-events: none;

    background: linear-gradient(
        90deg,
        rgba(238,246,255,1) 0%,
        rgba(238,246,255,0.98) 30%,
        rgba(238,246,255,0.85) 52%,
        rgba(238,246,255,0.35) 78%,
        rgba(238,246,255,0) 100%
    );
}


/* =========================================================
   CONTAINER
   ========================================================= */

.jf-hero-container {
    width: 100%;
    max-width: 1200px;

    height: 100%;

    margin: 0 auto;

    padding: 0 25px;

    position: relative;

    z-index: 3;

    box-sizing: border-box;
}


/* =========================================================
   CONTENT
   ========================================================= */

.jf-hero-content {
    width: 55%;
    max-width: 650px;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    text-align: left;
}


/* =========================================================
   INTRO
   ========================================================= */

.jf-hero-intro {
    margin: 0 0 14px;

    color: #295cab;

    font-size: 15px;

    line-height: 1.4;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* =========================================================
   HEADING
   ========================================================= */

.jf-hero-content h1 {
    margin: 0 0 20px;

    max-width: 650px;

    color: #101828;

    font-size: clamp(42px, 5vw, 68px);

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -1.5px;
}

.jf-hero-content h1 span {
    color: #295cab;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.jf-hero-content p {
    margin: 0 0 30px;

    max-width: 600px;

    color: #4a5568;

    font-size: 17px;

    line-height: 1.7;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.jf-hero-buttons {
    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 14px;

    flex-wrap: wrap;
}


.jf-btn {
    min-height: 52px;

    padding: 13px 27px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

    line-height: 1.2;

    box-sizing: border-box;

    transition: all 0.25s ease;
}


/* PRIMARY BUTTON */

.jf-btn-primary {
    color: #ffffff;

    background:#1e4fd8;;

    border: 2px solid #4d62d8;
}

.jf-btn-primary:hover {
    color: #ffffff;

    background: #354bc5;

    border-color: #354bc5;

    transform: translateY(-2px);
}


/* OUTLINE BUTTON */

.jf-btn-outline {
    color:#ffff;

    background:#1e4fd8;

    border: 2px solid #4d62d8;
}

.jf-btn-outline:hover {
    color: #ffffff;

    background: #4d62d8;

    transform: translateY(-2px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .jf-hero-inner {
        height: 620px;

        min-height: 620px;
    }

    .jf-hero-image {
        height: 100%;

        right: -40px;
    }

    .jf-hero-overlay {
        width: 72%;
    }

    .jf-hero-container {
        padding: 0 25px;
    }

    .jf-hero-content {
        width: 60%;
    }

    .jf-hero-content h1 {
        font-size: 48px;
    }

    .jf-hero-content p {
        font-size: 15px;

        max-width: 520px;
    }

    .jf-btn {
        padding: 12px 22px;

        font-size: 14px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

/* =========================================================
   JFINMATE HERO - MOBILE FINAL
   ========================================================= */

@media (max-width: 767px) {

    .jf-hero {
        width: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    .jf-hero-inner {
        width: 100%;
        height: 650px;
        min-height: 650px;
        position: relative;
        overflow: hidden;
        background: #eef6ff;
    }


    /* =====================================================
       IMAGE
       ===================================================== */

    .jf-hero-image {
        position: absolute;

        height: 100%;
        width: auto;
        max-width: none;

        top: 0;

        /*
         * Keep image on right.
         */
        right: -85px;

        object-fit: contain;
        object-position: right center;

        z-index: 1;

        display: block;
    }


    /* =====================================================
       IMAGE OVERLAY
       ===================================================== */

    .jf-hero-overlay {
        position: absolute;

        top: 0;
        left: 0;

        width: 100%;
        height: 100%;

        z-index: 2;

        pointer-events: none;

        background: linear-gradient(
            90deg,
            rgba(238,246,255,0.99) 0%,
            rgba(238,246,255,0.97) 32%,
            rgba(238,246,255,0.82) 48%,
            rgba(238,246,255,0.45) 65%,
            rgba(238,246,255,0.08) 100%
        );
    }


    /* =====================================================
       CONTAINER
       ===================================================== */

    .jf-hero-container {
        width: 100%;
        height: 100%;

        margin: 0;
        padding: 0 5px;

        position: relative;
        z-index: 3;

        box-sizing: border-box;
    }


    /* =====================================================
       CONTENT
       ===================================================== */

    .jf-hero-content {

        width: 68%;
        max-width: 345px;

        height: 100%;

        margin: 0;

        display: flex;
        flex-direction: column;

        justify-content: center;
        align-items: flex-start;

        text-align: left;
    }


    /* =====================================================
       INTRO
       ===================================================== */

    .jf-hero-intro {

        width: 100%;

        margin: 0 0 13px;

        font-size: 11px;
        line-height: 1.4;

        letter-spacing: 1.4px;

        color: #295cab;

        font-weight: 800;

        white-space: nowrap;
    }


    /* =====================================================
       HEADING
       ===================================================== */

    .jf-hero-content h1 {

        width: 100%;
        max-width: 340px;

        margin: 0 0 18px;

        font-size: 30px;
        line-height: 1.13;

        letter-spacing: -0.5px;

        color: #101828;
    }

    .jf-hero-content h1 span {
        color: #295cab !important;
    }


    /* =====================================================
       DESCRIPTION
       ===================================================== */

    .jf-hero-content p {

        width: 100%;
        max-width: 335px;

        margin: 0 0 25px;

        font-size: 13px;
        line-height: 1.65;

        color: #526174;
    }


    /* =====================================================
       BUTTON AREA
       ===================================================== */

    .jf-hero-buttons {

        width: 100%;
        max-width: 285px;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 10px;
    }


    /* =====================================================
       BUTTON
       ===================================================== */

    .jf-btn {

        width: 100%;

        min-height: 52px;

        padding: 12px 10px;

        display: flex;

        align-items: center;
        justify-content: center;

        box-sizing: border-box;

        border-radius: 10px;

        font-size: 14px;

        line-height: 1.25;

        text-align: center;
    }


    .jf-btn-primary {

        background: #4d62d8;

        color: #ffffff;

        border: 2px solid #4d62d8;
    }


    .jf-btn-outline {

        background:#1e4fd8;;

        color: #fff;

        border: 2px solid #4d62d8;
    }
}


/* =========================================================
   SMALL MOBILE - 480px
   ========================================================= */

@media (max-width: 480px) {

    .jf-hero-inner {

        height: 590px;
        min-height: 590px;
    }


    .jf-hero-image {

        height: 590px;

        /*
         * Move image further right.
         */
        right: -100px;
    }


    .jf-hero-content {

        width: 69%;
        max-width: 300px;
    }


    .jf-hero-intro {

        font-size: 9px;

        letter-spacing: 1.1px;

        margin-bottom: 10px;
    }


    .jf-hero-content h1 {

        font-size: 28px;

        line-height: 1.14;

        margin-bottom: 15px;
    }


    .jf-hero-content p {

        font-size: 12px;

        line-height: 1.6;

        margin-bottom: 20px;
    }


    .jf-hero-buttons {

        max-width: 270px;

        gap: 9px;
    }


    .jf-btn {

        min-height: 49px;

        font-size: 13px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .jf-hero-inner {

        height: 590px;

        min-height: 590px;
    }


    .jf-hero-image {

        height: 590px;

        right: -65px;
    }


    .jf-hero-content {

        width: 68%;

        max-width: 300px;
    }


    .jf-hero-intro {

        font-size: 9px;

        letter-spacing: 1.1px;

        margin-bottom: 10px;
    }


    .jf-hero-content h1 {

        font-size: 28px;

        line-height: 1.14;

        margin-bottom: 15px;
    }


    .jf-hero-content p {

        font-size: 12px;

        line-height: 1.6;

        margin-bottom: 20px;
    }


    .jf-hero-buttons {

        max-width: 275px;

        gap: 9px;
    }


    .jf-btn {

        min-height: 49px;

        font-size: 13px;

        padding: 11px 10px;
    }
}

/* =========================================================
   MOBILE ONLY - FINAL FIX
   ========================================================= */

@media (max-width: 767px) {

    /* BUTTONS ONE BELOW ANOTHER */
    .jf-clean-buttons {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;

        width: 100% !important;
        gap: 8px !important;

        position: relative !important;
        z-index: 50 !important;
    }


    .jf-clean-btn {
        display: flex !important;

        width: 190px !important;
        min-width: 190px !important;

        height: 42px !important;
        min-height: 42px !important;

        margin: 0 !important;

        align-items: center !important;
        justify-content: center !important;

        box-sizing: border-box !important;

        border-radius: 25px !important;

        white-space: nowrap !important;
    }


    /* =====================================================
       IMAGE - MOVE TO RIGHT
       ===================================================== */

    .jf-clean-image {
        width: 100% !important;

        height: 245px !important;
        min-height: 245px !important;

        position: relative !important;

        margin: 0 !important;

        display: flex !important;

        align-items: flex-end !important;

        justify-content: flex-end !important;

        overflow: hidden !important;

        z-index: 1 !important;
    }


    .jf-clean-image img {
        width: 100% !important;

        height: 100% !important;

        object-fit: cover !important;

        /*
         * Move complete image toward right
         */
        object-position: 72% center !important;

        display: block !important;
    }


    /* Keep text above image */
    .jf-clean-hero-content {
        position: relative !important;

        z-index: 20 !important;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .jf-clean-buttons {
        flex-direction: column !important;

        align-items: flex-start !important;

        gap: 7px !important;
    }


    .jf-clean-btn {
        width: 180px !important;

        min-width: 180px !important;

        height: 40px !important;

        min-height: 40px !important;
    }


    .jf-clean-image {
        height: 230px !important;

        min-height: 230px !important;
    }


    .jf-clean-image img {
        object-position: 76% center !important;
    }
}

@media (max-width: 767px) {
    .jfinHeroSlide:nth-child(1) {
        background-size: auto 63% !important;
        
    }
}


/* =========================================
   JFINMATE DIFFERENCE SECTION
========================================= */

.jfm-difference-section {
    width: 100%;
    margin: 0;
    padding: 52px 24px 0;
    background: #fbfcfe;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;
}

.jfm-difference-section *,
.jfm-difference-section *::before,
.jfm-difference-section *::after {
    box-sizing: border-box;
}

.jfm-difference-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.94fr 1.25fr;
    align-items: start;
    gap: 42px;
}

/* LEFT CONTENT */

.jfm-difference-content {
    min-width: 0;
    padding-top: 1px;
}

.jfm-difference-label {
    display: block;
    margin-bottom: 7px;
    color: #2874ff;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
}

.jfm-difference-content h2 {
    margin: 0 0 10px;
    color: #373737;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -0.2px;
}

.jfm-difference-description {
    margin: 0 0 10px;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
}

.jfm-benefits-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.jfm-benefits-list li {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 31px;
    color: #353535;
    font-size: 14px;
    line-height: 1.4;
}

.jfm-check-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    background: #e3edff;
    color: #2874ff;
    font-size: 15px;
    font-weight: 600;
}

/* RIGHT SIDE CARDS */

.jfm-difference-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 12px;
    min-width: 0;
}

.jfm-difference-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #f0f1f3;
    border-radius: 12px;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.07);
}

.jfm-card-image {
    width: 100%;
    height: 174px;
    flex-shrink: 0;
    overflow: hidden;
    background: #edf3f9;
}

.jfm-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.35s ease;
}

.jfm-difference-card:hover .jfm-card-image img {
    transform: scale(1.035);
}

/* CARD BODY */

.jfm-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    padding: 10px 16px 18px;
}

.jfm-card-body h3 {
    margin: 0 0 7px;
    color: #393939;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.2px;
}

.jfm-card-body h3 span {
    color: #2874ff;
}

.jfm-card-body p {
    margin: 0 0 14px;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.jfm-card-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 31px;
    margin-top: auto;
    padding: 6px 10px;
    border: 1px solid #4b83ff;
    border-radius: 5px;
    background: #ffffff;
    color: #2874ff;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease;
}

.jfm-card-button:hover,
.jfm-card-button:focus-visible {
    background: #2874ff;
    color: #ffffff;
}

.jfm-card-arrow {
    font-size: 15px;
    line-height: 1;
    transition: transform 0.25s ease;
}

.jfm-card-button:hover .jfm-card-arrow {
    transform: translateX(3px);
}

/* BOTTOM FOOTER STRIP */

.jfm-difference-footer {
    width: calc(100% + 48px);
    min-height: 60px;
    margin: 48px -24px 0;
    padding: 22px 12px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #2874ff;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
}

/* =========================================
   LARGE LAPTOPS
========================================= */

@media (min-width: 1400px) {
    .jfm-difference-container {
        max-width: 1280px;
        gap: 55px;
    }

    .jfm-card-image {
        height: 195px;
    }
}

/* =========================================
   TABLETS
========================================= */

@media (max-width: 991px) {
    .jfm-difference-section {
        padding: 38px 20px 0;
    }

    .jfm-difference-container {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .jfm-difference-content {
        max-width: 650px;
    }

    .jfm-difference-content h2 {
        font-size: 22px;
    }

    .jfm-difference-description {
        font-size: 13px;
    }

    .jfm-benefits-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .jfm-benefits-list li {
        font-size: 12px;
    }

    .jfm-difference-cards {
        gap: 18px;
    }

    .jfm-card-image {
        height: 220px;
    }

    .jfm-card-body {
        padding: 14px 16px 18px;
    }

    .jfm-card-body h3 {
        font-size: 18px;
    }

    .jfm-card-body p {
        font-size: 12px;
    }

    .jfm-card-button {
        min-height: 38px;
        font-size: 12px;
    }

    .jfm-difference-footer {
        width: calc(100% + 40px);
        margin: 35px -20px 0;
    }
}

/* =========================================
   MOBILE PHONES
========================================= */

@media (max-width: 576px) {
    .jfm-difference-section {
        padding: 30px 16px 0;
    }

    .jfm-difference-container {
        grid-template-columns: minmax(0, 1fr);
        gap: 25px;
    }

    .jfm-difference-label {
        font-size: 11px;
        margin-bottom: 8px;
    }

    .jfm-difference-content h2 {
        font-size: 21px;
        line-height: 1.35;
        margin-bottom: 10px;
    }

    .jfm-difference-description {
        font-size: 12px;
        line-height: 1.65;
        margin-bottom: 15px;
    }

    .jfm-benefits-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .jfm-benefits-list li {
        gap: 10px;
        min-height: 32px;
        font-size: 12px;
    }

    .jfm-check-icon {
        flex-basis: 29px;
        width: 29px;
        height: 29px;
        font-size: 16px;
    }

    .jfm-difference-cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .jfm-difference-card {
        width: 100%;
        border-radius: 12px;
    }

    .jfm-card-image {
        height: 210px;
    }

    .jfm-card-body {
        padding: 15px 15px 17px;
    }

    .jfm-card-body h3 {
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 7px;
    }

    .jfm-card-body p {
        font-size: 12px;
        line-height: 1.6;
        margin-bottom: 14px;
    }

    .jfm-card-button {
        min-height: 42px;
        font-size: 12px;
    }

    .jfm-difference-footer {
        width: calc(100% + 32px);
        min-height: 55px;
        margin: 30px -16px 0;
        padding: 18px 10px;
        font-size: 11px;
    }
}

/* =========================================
   SMALL IPHONES
========================================= */

@media (max-width: 360px) {
    .jfm-difference-section {
        padding-right: 12px;
        padding-left: 12px;
    }

    .jfm-difference-content h2 {
        font-size: 19px;
    }

    .jfm-card-image {
        height: 180px;
    }

    .jfm-card-body h3 {
        font-size: 16px;
    }

    .jfm-difference-footer {
        width: calc(100% + 24px);
        margin-right: -12px;
        margin-left: -12px;
    }
}


/* ==========================================
   JFINMATE REWARDS SECTION
========================================== */

.jfm-rewards-section {
    width: 100%;
    margin: 0;
    padding: 38px 24px 44px;
    background: #f0f6fd;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
    overflow: hidden;
}

.jfm-rewards-section *,
.jfm-rewards-section *::before,
.jfm-rewards-section *::after {
    box-sizing: border-box;
}

.jfm-rewards-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
}

/* HEADING */

.jfm-rewards-heading {
    text-align: center;
    margin: 0 auto 43px;
}

.jfm-rewards-eyebrow {
    display: block;
    color: #2874f0;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 5px;
}

.jfm-rewards-heading h2 {
    margin: 0 0 5px;
    color: #373737;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
}

.jfm-rewards-heading p {
    margin: 0;
    color: #777777;
    font-size: 12px;
    line-height: 1.5;
}

/* STEPS GRID */

.jfm-rewards-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
    margin-bottom: 43px;
}

.jfm-reward-step {
    min-width: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.jfm-reward-icon {
    width: 39px;
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 13px;
    border-radius: 3px;
    background: #2874e8;
    color: #ffffff;
    font-size: 15px;
}

.jfm-reward-step h3 {
    margin: 0 0 10px;
    color: #393939;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.jfm-reward-step h4 {
    min-height: 15px;
    margin: 0 0 5px;
    color: #171717;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.35;
}

.jfm-reward-step p {
    max-width: 190px;
    margin: 0;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
}

/* REFERRAL BANNER */

.jfm-referral-banner {
    display: flex;
    align-items: center;
    gap: 22px;
    width: 100%;
    min-height: 78px;
    padding: 15px 17px;
    border-radius: 7px;
    background: #e4efff;
}

.jfm-referral-gift {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: #2874e8;
    color: #ffffff;
    font-size: 22px;
}

.jfm-referral-content {
    flex: 1;
    min-width: 0;
}

.jfm-referral-content h3 {
    margin: 0 0 4px;
    color: #3b3b3b;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}

.jfm-referral-content p {
    max-width: 460px;
    margin: 0;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.jfm-referral-button {
    min-width: 144px;
    min-height: 43px;
    padding: 8px 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-shrink: 0;
    border: 1px solid #2874e8;
    border-radius: 4px;
    background: #2874e8;
    color: #ffffff !important;
    font-size: 14px;
    line-height: 1.3;
    text-decoration: none;
    transition: background 0.25s ease;
}

.jfm-referral-button:hover {
    background: #185ac4;
    border-color: #185ac4;
    color: #ffffff !important;
}

.jfm-referral-button i {
    font-size: 11px;
    transition: transform 0.25s ease;
}

.jfm-referral-button:hover i {
    transform: translateX(3px);
}

/* ==========================================
   LAPTOP
========================================== */

@media (min-width: 1200px) {
    .jfm-rewards-section {
        padding-right: 30px;
        padding-left: 30px;
    }

    .jfm-rewards-steps {
        gap: 28px;
    }
}

/* ==========================================
   TABLET
========================================== */

@media (max-width: 991px) {
    .jfm-rewards-section {
        padding: 35px 20px;
    }

    .jfm-rewards-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 20px;
        row-gap: 30px;
        margin-bottom: 35px;
    }

    .jfm-reward-step h4 {
        font-size: 12px;
    }

    .jfm-reward-step p {
        font-size: 11px;
    }

    .jfm-referral-banner {
        gap: 14px;
    }
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 576px) {
    .jfm-rewards-section {
        padding: 30px 16px 28px;
    }

    .jfm-rewards-heading {
        margin-bottom: 30px;
    }

    .jfm-rewards-heading h2 {
        font-size: 21px;
    }

    .jfm-rewards-heading p {
        max-width: 340px;
        margin: 0 auto;
        font-size: 12px;
        line-height: 1.6;
    }

    .jfm-rewards-eyebrow {
        font-size: 11px;
    }

    .jfm-rewards-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 18px;
        row-gap: 28px;
        margin-bottom: 30px;
    }

    .jfm-reward-icon {
        width: 34px;
        height: 34px;
        margin-bottom: 10px;
        font-size: 17px;
    }

    .jfm-reward-step h3 {
        margin-bottom: 7px;
        font-size: 14px;
    }

    .jfm-reward-step h4 {
        min-height: 0;
        margin-bottom: 6px;
        font-size: 12px;
        line-height: 1.4;
    }

    .jfm-reward-step p {
        max-width: 230px;
        font-size: 11px;
        line-height: 1.55;
    }

    /* Banner stacks cleanly on phones */
    .jfm-referral-banner {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        padding: 16px 13px;
    }

    .jfm-referral-gift {
        width: 38px;
        height: 38px;
        font-size: 20px;
    }

    .jfm-referral-content h3 {
        font-size: 12px;
    }

    .jfm-referral-content p {
        font-size: 10.5px;
        line-height: 1.55;
    }

    .jfm-referral-button {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 42px;
        font-size: 12px;
    }
}

/* ==========================================
   VERY SMALL PHONES
========================================== */

@media (max-width: 360px) {
    .jfm-rewards-section {
        padding-right: 12px;
        padding-left: 12px;
    }

    .jfm-rewards-steps {
        column-gap: 12px;
    }

    .jfm-reward-step h4 {
        font-size: 11px;
    }

    .jfm-reward-step p {
        font-size: 10px;
    }

    .jfm-referral-banner {
        padding: 13px 10px;
    }
}

/* =====================================
   WHY CUSTOMERS PREFER JFINMATE
===================================== */

.jfm-why-section {
    width: 100%;
    padding: 50px 24px 48px;
    margin: 0;
    background: #fbfcfe;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
    overflow: hidden;
}

.jfm-why-section *,
.jfm-why-section *::before,
.jfm-why-section *::after {
    box-sizing: border-box;
}

.jfm-why-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
}

/* HEADING */

.jfm-why-heading {
    text-align: center;
    margin-bottom: 32px;
}

.jfm-why-heading > span {
    display: block;
    color: #2874ff;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 5px;
}

.jfm-why-heading h2 {
    margin: 0 0 5px;
    color: #383838;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.35;
}

.jfm-why-heading p {
    margin: 0;
    color: #777;
    font-size: 14px;
    line-height: 1.5;
}

/* GRID */

.jfm-why-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 22px;
    row-gap: 32px;
    align-items: start;
}

/* CARD */

.jfm-why-card {
    min-width: 0;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: hidden;
}

/* IMAGE */

.jfm-why-image {
    width: 100%;
    height: 195px;
    overflow: hidden;
    border-radius: 9px 9px 0 0;
    background: #edf2f7;
}

.jfm-why-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.jfm-why-card:hover .jfm-why-image img {
    transform: scale(1.025);
}

/* CARD TEXT */

.jfm-why-card-content {
    padding: 9px 11px 0;
}

.jfm-why-card-content h3 {
    margin: 0 0 7px;
    color: #3b3b3b;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
}

.jfm-why-card-content p {
    margin: 0;
    color: #777;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
}

/* =====================================
   TABLETS
===================================== */

@media (max-width: 991px) {
    .jfm-why-section {
        padding: 40px 20px;
    }

    .jfm-why-grid {
        column-gap: 18px;
        row-gap: 28px;
    }

    .jfm-why-image {
        height: 165px;
    }

    .jfm-why-card-content {
        padding: 9px 5px 0;
    }

    .jfm-why-card-content h3 {
        font-size: 14px;
    }

    .jfm-why-card-content p {
        font-size: 11px;
    }
}

/* =====================================
   MOBILE
===================================== */

@media (max-width: 600px) {
    .jfm-why-section {
        padding: 32px 16px 35px;
    }

    .jfm-why-heading {
        margin-bottom: 25px;
    }

    .jfm-why-heading h2 {
        font-size: 20px;
        line-height: 1.35;
    }

    .jfm-why-heading p {
        max-width: 340px;
        margin: 0 auto;
        font-size: 12px;
    }

    .jfm-why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 14px;
        row-gap: 25px;
    }

    .jfm-why-image {
        height: 135px;
        border-radius: 7px 7px 0 0;
    }

    .jfm-why-card-content {
        padding: 8px 2px 0;
    }

    .jfm-why-card-content h3 {
        margin-bottom: 5px;
        font-size: 13px;
        line-height: 1.4;
    }

    .jfm-why-card-content p {
        font-size: 11px;
        line-height: 1.5;
    }
}

/* SMALL PHONES */

@media (max-width: 380px) {
    .jfm-why-section {
        padding-right: 12px;
        padding-left: 12px;
    }

    .jfm-why-grid {
        column-gap: 12px;
        row-gap: 22px;
    }

    .jfm-why-image {
        height: 115px;
    }

    .jfm-why-card-content h3 {
        font-size: 12px;
    }

    .jfm-why-card-content p {
        font-size: 10px;
    }
}



/* =========================================
   WHY CUSTOMERS PREFER JFINMATE
========================================= */

.jf-prefer {
    width: 100%;
    padding: 80px 20px;
    background: #f7f9fc;
    overflow: hidden;
}

.jf-prefer .jf-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


/* =========================================
   SECTION HEADING
========================================= */

.jf-prefer .jf-section-heading {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 45px;
}

.jf-prefer .eyebrow {
    display: inline-block;
    margin-bottom: 10px;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    color:#1e4fd8;
   
}

.jf-prefer .jf-section-heading h2 {
    margin: 0 0 12px;

    font-size: 38px;
    line-height: 1.2;
    font-weight: 700;

    color: #172b4d;
}

.jf-prefer .jf-section-heading p {
    margin: 0;

    font-size: 17px;
    line-height: 1.6;

    color: #667085;
}


/* =========================================
   CARD GRID
========================================= */

.jf-prefer-grid {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 24px;

    width: 100%;
}


/* =========================================
   CARD
========================================= */

.jf-prefer-card {
    width: 100%;
    min-width: 0;

    background: #ffffff;

    border-radius: 18px;

    overflow: hidden;

    border: 1px solid #e8ecf2;

    box-shadow: 0 8px 30px rgba(20, 40, 70, 0.07);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.jf-prefer-card:hover {
    transform: translateY(-7px);

    box-shadow: 0 16px 40px rgba(20, 40, 70, 0.13);
}


/* =========================================
   IMAGE
========================================= */

.jf-prefer-image {
    width: 100%;
    height: 190px;

    overflow: hidden;

    background: #e9edf3;
}

.jf-prefer-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.jf-prefer-card:hover .jf-prefer-image img {
    transform: scale(1.06);
}


/* =========================================
   CARD CONTENT
========================================= */

.jf-prefer-content {
    padding: 22px 20px 24px;

    text-align: center;
}

.jf-prefer-content h3 {
    margin: 0 0 10px;

    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;

    color: #172b4d;
}

.jf-prefer-content p {
    margin: 0;

    font-size: 14px;
    line-height: 1.6;

    color: #667085;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .jf-prefer {
        padding: 70px 20px;
    }

    .jf-prefer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }

    .jf-prefer-image {
        height: 180px;
    }

    .jf-prefer .jf-section-heading h2 {
        font-size: 34px;
    }
}


/* =========================================
   SMALL TABLET
========================================= */

@media (max-width: 768px) {

    .jf-prefer {
        padding: 55px 16px;
    }

    .jf-prefer .jf-section-heading {
        margin-bottom: 30px;
    }

    .jf-prefer .jf-section-heading h2 {
        font-size: 29px;
    }

    .jf-prefer .jf-section-heading p {
        font-size: 15px;
    }

    .jf-prefer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .jf-prefer-image {
        height: 165px;
    }

    .jf-prefer-content {
        padding: 18px 15px 20px;
    }

    .jf-prefer-content h3 {
        font-size: 16px;
    }

    .jf-prefer-content p {
        font-size: 13px;
    }
}
  
        /* =========================================================
   JFINSERV HERO - CLEAN VERSION
   ========================================================= */

.jfinHero,
.jfinHero * {
    box-sizing: border-box;
}


/* =========================================================
   HERO
   ========================================================= */

.jfinHero {
    position: relative;

    width: 100%;
    height: 570px;

    overflow: hidden;

    margin: 0;
    padding: 0;

    background: #eef7ff;
}


/* =========================================================
   SLIDER
   ========================================================= */

.jfinHeroSlider {
    position: relative;

    width: 100%;
    height: 100%;
}


/* =========================================================
   SLIDE
   ========================================================= */

.jfinHeroSlide {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background-repeat: no-repeat;

    background-size: cover;
    background-position: center center;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .7s ease,
        visibility .7s ease;

    z-index: 1;
}


/* Active */

.jfinHeroSlideActive {
    opacity: 1;

    visibility: visible;

    z-index: 2;
}


/* =========================================================
   SLIDE IMAGE POSITIONS - DESKTOP
   ========================================================= */

.jfinHeroSlide:nth-child(1) {
    background-position: center center;
}

.jfinHeroSlide:nth-child(2) {
    background-position: right center;
}


/* =========================================================
   CONTENT
   ========================================================= */

.jfinHeroContent {
    position: relative;

    width: 100%;
    max-width: 1350px;

    height: 100%;

    margin: 0 auto;

    padding: 0 70px;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    z-index: 10;
}


/* =========================================================
   TEXT
   ========================================================= */

.jfinHeroText {
    position: relative;

    width: 52%;
    max-width: 650px;

    z-index: 20;
}


/* =========================================================
   LABEL
   ========================================================= */

.jfinHeroLabel {
    margin-bottom: 15px;

    color: #ed1c24;

    font-size: 13px;
    font-weight: 700;

    line-height: 1.3;

    letter-spacing: 4px;

    text-transform: uppercase;
}


/* =========================================================
   TITLE
   ========================================================= */

.jfinHeroTitle {
    margin: 0 0 18px;

    color: #295cab;

    font-size: 48px;
    font-weight: 800;

    line-height: 1.12;

    letter-spacing: -.5px;
}


.jfinHeroTitle span {
    color: #009fe3;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.jfinHeroDescription {
    max-width: 570px;

    margin: 0 0 28px;

    color: #333;

    font-size: 16px;

    line-height: 1.6;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.jfinHeroButtons {
    display: flex;

    align-items: center;

    gap: 12px;
}


.jfinHeroBtn {
    min-width: 130px;

    height: 48px;

    padding: 0 25px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 30px;

    font-size: 15px;
    font-weight: 700;

    text-decoration: none;

    transition: .25s ease;
}


/* Apply */

.jfinHeroApply {
    color: #fff;

    background: #2858d7;

    border: 2px solid #2858d7;

    box-shadow: 0 8px 20px rgba(40,88,215,.25);
}


/* Login */

.jfinHeroLogin {
    color: #fff;

    background: #ed1c24;

    border: 2px solid #ed1c24;

    box-shadow: 0 8px 20px rgba(237,28,36,.22);
}


/* =========================================================
   ARROWS
   ========================================================= */

.jfinHeroNavigation {
    position: absolute;

    right: 35px;
    bottom: 30px;

    display: flex;

    gap: 10px;

    z-index: 100;
}


.jfinHeroArrow {
    width: 48px;
    height: 48px;

    border: 0;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #444;

    background: rgba(255,255,255,.95);

    cursor: pointer;

    font-size: 15px;

    box-shadow: 0 5px 15px rgba(0,0,0,.12);
}

/* =========================================================
   JFINSERV HERO - MOBILE ONLY
   DESKTOP CSS WILL NOT CHANGE
   ========================================================= */

@media (max-width: 767px) {

    /* HERO */
    .jfinHero {
        width: 100% !important;
        height: 225px !important;
        min-height: 225px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        position: relative !important;
    }


    /* SLIDER */
    .jfinHeroSlider {
        width: 100% !important;
        height: 100% !important;
    }


    /* =====================================================
       IMAGE
       ===================================================== */

    .jfinHeroSlide {
        width: 100% !important;
        height: 100% !important;

        background-repeat: no-repeat !important;

        /*
         * Smaller image on mobile
         */
        background-size: auto 82% !important;

        background-position: right bottom !important;

        transform: none !important;
    }


    /* First banner */
    .jfinHeroSlide:nth-child(1) {
        background-size: auto 82% !important;
        background-position: right bottom !important;
    }


    /* Second banner */
    .jfinHeroSlide:nth-child(2) {
        background-size: auto 82% !important;
        background-position: right bottom !important;
    }


    /* =====================================================
       CONTENT
       ===================================================== */

    .jfinHeroContainer {
        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;

        padding: 14px 10px 8px 12px !important;

        display: flex !important;

        align-items: flex-start !important;
        justify-content: flex-start !important;

        position: relative !important;

        z-index: 10 !important;
    }


    /* =====================================================
       TEXT AREA
       ===================================================== */

    .jfinHeroContent {
        width: 55% !important;

        max-width: 205px !important;

        margin: 0 !important;
        padding: 0 !important;

        position: relative !important;

        z-index: 30 !important;
    }


    /* =====================================================
       LABEL
       ===================================================== */

    .jfinHeroLabel {
        margin: 0 0 5px 0 !important;
        padding: 0 !important;

        font-size: 7px !important;

        line-height: 1.2 !important;

        letter-spacing: 2px !important;

        white-space: nowrap !important;
    }


    /* =====================================================
       TITLE
       ===================================================== */

    .jfinHeroTitle {
        width: 100% !important;

        margin: 0 0 6px 0 !important;
        padding: 0 !important;

        font-size: 18px !important;

        line-height: 1.08 !important;

        letter-spacing: 0 !important;

        position: relative !important;

        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;

        transform: none !important;

        z-index: 40 !important;
    }


    .jfinHeroTitle span {
        color: #009fe3 !important;
    }


    /* =====================================================
       DESCRIPTION
       ===================================================== */

    .jfinHeroDescription {
        width: 100% !important;

        max-width: 200px !important;

        margin: 0 0 9px 0 !important;
        padding: 0 !important;

        font-size: 7.2px !important;

        line-height: 1.3 !important;

        position: relative !important;

        z-index: 40 !important;

        display: -webkit-box !important;

        -webkit-box-orient: vertical !important;

        -webkit-line-clamp: 3 !important;

        overflow: hidden !important;
    }


    /* =====================================================
       BUTTONS
       ===================================================== */

    .jfinHeroButtons {
        width: 100% !important;

        display: flex !important;

        align-items: center !important;

        gap: 7px !important;

        margin: 0 !important;
        padding: 0 !important;

        position: relative !important;

        z-index: 50 !important;
    }


    .jfinHeroButton {
        width: 88px !important;
        min-width: 88px !important;

        height: 39px !important;

        padding: 0 5px !important;

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        border-radius: 25px !important;

        font-size: 10.5px !important;

        white-space: nowrap !important;
    }


    /* =====================================================
       ARROWS
       ===================================================== */

    .jfinHeroNavigation {
        position: absolute !important;

        right: 8px !important;

        bottom: 8px !important;

        display: flex !important;

        gap: 7px !important;

        z-index: 100 !important;
    }


    .jfinHeroArrow {
        width: 36px !important;
        height: 36px !important;

        min-width: 36px !important;

        padding: 0 !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        font-size: 12px !important;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .jfinHero {
        height: 220px !important;
        min-height: 220px !important;
    }


    .jfinHeroSlide {
        /*
         * Keep person + phone smaller
         */
        background-size: auto 78% !important;

        background-position: right bottom !important;
    }


    .jfinHeroContainer {
        padding: 13px 9px 7px 11px !important;
    }


    .jfinHeroContent {
        width: 54% !important;
        max-width: 200px !important;
    }


    .jfinHeroTitle {
        font-size: 17px !important;
        line-height: 1.07 !important;
    }


    .jfinHeroDescription {
        font-size: 7px !important;

        max-width: 190px !important;

        line-height: 1.28 !important;
    }


    .jfinHeroButton {
        width: 86px !important;
        min-width: 86px !important;

        height: 38px !important;

        font-size: 10px !important;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .jfinHero {
        height: 215px !important;
        min-height: 215px !important;
    }


    .jfinHeroSlide {
        background-size: auto 75% !important;

        background-position: right bottom !important;
    }


    .jfinHeroContainer {
        padding: 12px 8px 7px 10px !important;
    }


    .jfinHeroContent {
        width: 55% !important;
    }


    .jfinHeroTitle {
        font-size: 16px !important;
    }


    .jfinHeroDescription {
        font-size: 6.8px !important;
    }


    .jfinHeroButton {
        width: 80px !important;
        min-width: 80px !important;

        height: 36px !important;

        font-size: 9.5px !important;
    }


    .jfinHeroNavigation {
        right: 7px !important;
        bottom: 7px !important;
    }


    .jfinHeroArrow {
        width: 33px !important;
        height: 33px !important;
    }

}
@media (max-width: 767px) {

    /* Give the text more horizontal space */
    .jfinHeroContent {
        width: 62% !important;
        max-width: 250px !important;
    }

    .jfinHeroText {
        width: 100% !important;
        max-width: 250px !important;
    }

    /* Don't break normal words */
    .jfinHeroTitle {
        width: 100% !important;

        font-size: 18px !important;
        line-height: 1.08 !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        white-space: normal !important;
    }

    .jfinHeroTitle span {
        display: inline !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    /* Description */
    .jfinHeroDescription {
        width: 100% !important;
        max-width: 230px !important;

        word-break: normal !important;
        overflow-wrap: normal !important;

        font-size: 7.5px !important;
        line-height: 1.35 !important;
    }

    /* Keep image on right */
    .jfinHeroSlide {
        background-size: auto 78% !important;
        background-position: right bottom !important;
    }

}


/* =====================================================
   480px
   ===================================================== */

@media (max-width: 480px) {

    .jfinHeroContent {
        width: 61% !important;
        max-width: 235px !important;
    }

    .jfinHeroText {
        width: 100% !important;
        max-width: 235px !important;
    }

    .jfinHeroTitle {
        font-size: 17px !important;
        line-height: 1.08 !important;
    }

    .jfinHeroDescription {
        max-width: 215px !important;
        font-size: 7px !important;
    }

}


/* =====================================================
   360px
   ===================================================== */

@media (max-width: 360px) {

    .jfinHeroContent {
        width: 60% !important;
        max-width: 215px !important;
    }

    .jfinHeroText {
        max-width: 215px !important;
    }

    .jfinHeroTitle {
        font-size: 16px !important;
    }

    .jfinHeroDescription {
        max-width: 195px !important;
        font-size: 6.8px !important;
    }

}
@media (max-width: 767px) {

    .jfinHeroContent {
        width: 64% !important;
        max-width: 255px !important;
    }

    .jfinHeroText {
        width: 100% !important;
        max-width: 255px !important;
    }

    .jfinHeroTitle {
        width: 100% !important;

        font-size: 18px !important;
        line-height: 1.08 !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .jfinHeroTitle span {
        display: inline !important;
        white-space: normal !important;
    }

}


/* SMALL MOBILE */

@media (max-width: 480px) {

    .jfinHeroContent {
        width: 64% !important;
        max-width: 240px !important;
    }

    .jfinHeroText {
        max-width: 240px !important;
    }

    .jfinHeroTitle {
        font-size: 17px !important;
    }

}


/* VERY SMALL MOBILE */

@media (max-width: 360px) {

    .jfinHeroContent {
        width: 63% !important;
        max-width: 225px !important;
    }

    .jfinHeroText {
        max-width: 225px !important;
    }

    .jfinHeroTitle {
        font-size: 16px !important;
    }

}@media (max-width: 767px) {

    .jfinHeroContent {
        width: 70% !important;
        max-width: 280px !important;
        flex: 0 0 70% !important;
    }

    .jfinHeroText {
        width: 100% !important;
        max-width: 280px !important;
    }

    .jfinHeroTitle {
        width: 250px !important;
        max-width: 250px !important;

        font-size: 18px !important;
        line-height: 1.08 !important;

        margin: 0 0 7px 0 !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        white-space: normal !important;
    }

    .jfinHeroTitle span {
        display: inline !important;
        white-space: normal !important;
        word-break: normal !important;
    }

    .jfinHeroDescription {
        width: 220px !important;
        max-width: 220px !important;

        font-size: 7.2px !important;
        line-height: 1.3 !important;
    }

    .jfinHeroButtons {
        gap: 7px !important;
    }

    .jfinHeroButton {
        width: 105px !important;
        min-width: 105px !important;
    }

    .jfinHeroSlide {
        background-size: auto 78% !important;
        background-position: right bottom !important;
    }
}


/* =========================================
   SMALL MOBILE
   ========================================= */

@media (max-width: 480px) {

    .jfinHeroContent {
        width: 69% !important;
        max-width: 260px !important;
    }

    .jfinHeroText {
        max-width: 260px !important;
    }

    .jfinHeroTitle {
        width: 235px !important;
        max-width: 235px !important;

        font-size: 17px !important;
    }

    .jfinHeroDescription {
        width: 205px !important;
        max-width: 205px !important;
    }

    .jfinHeroButton {
        width: 100px !important;
        min-width: 100px !important;
    }
}


/* =========================================
   360px MOBILE
   ========================================= */

@media (max-width: 360px) {

    .jfinHeroContent {
        width: 68% !important;
        max-width: 240px !important;
    }

    .jfinHeroTitle {
        width: 220px !important;
        max-width: 220px !important;

        font-size: 16px !important;
    }

    .jfinHeroDescription {
        width: 195px !important;
        max-width: 195px !important;
    }

    .jfinHeroButton {
        width: 92px !important;
        min-width: 92px !important;
    }
}
/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .jfinHero {
        height: 480px;
    }

    .jfinHeroContent {
        padding: 0 40px;
    }

    .jfinHeroText {
        width: 55%;
    }

    .jfinHeroTitle {
        font-size: 40px;
    }

    .jfinHeroDescription {
        font-size: 14px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .jfinHero {
        position: relative;

        width: 100%;

        /*
         * Banner starts normally.
         * No negative margin.
         * No transform.
         */
        height: 225px !important;
        min-height: 225px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
    }


    .jfinHeroSlider {
        width: 100%;
        height: 100%;
    }


    /* =====================================================
       MOBILE SLIDE
       ===================================================== */

    .jfinHeroSlide {
        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;

        /*
         * VERY IMPORTANT
         */
        background-size: auto 100% !important;

        background-repeat: no-repeat !important;

        background-position: right center !important;

        opacity: 0;

        visibility: hidden;

        transform: none !important;
    }


    .jfinHeroSlideActive {
        opacity: 1;

        visibility: visible;
    }


    /* Slide 1 */

    .jfinHeroSlide:nth-child(1) {
        background-position: right center !important;
    }


    /* Slide 2 */

    .jfinHeroSlide:nth-child(2) {
        background-position: right center !important;
    }


    /* =====================================================
       CONTENT
       ===================================================== */

    .jfinHeroContent {
        position: relative;

        width: 100%;
        height: 100%;

        margin: 0;
        padding: 16px 12px 10px !important;

        display: block !important;

        z-index: 10;
    }


    /* =====================================================
       TEXT AREA
       ===================================================== */

    .jfinHeroText {
        position: relative;

        width: 54% !important;

        max-width: 210px !important;

        margin: 0 !important;

        padding: 0 !important;

        z-index: 30;
    }


    /* =====================================================
       LABEL
       ===================================================== */

    .jfinHeroLabel {
        margin: 0 0 5px;

        color: #ed1c24;

        font-size: 7px;

        font-weight: 700;

        line-height: 1.25;

        letter-spacing: 2px;
    }


    /* =====================================================
       TITLE
       ===================================================== */

    .jfinHeroTitle {
        position: relative;

        margin: 0 0 6px;

        padding: 0;

        color: #295cab;

        font-size: 18px !important;

        font-weight: 800;

        line-height: 1.08 !important;

        letter-spacing: 0;

        /*
         * Prevent clipping
         */
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;

        transform: none !important;
    }


    .jfinHeroTitle span {
        color: #009fe3;
    }


    /* =====================================================
       DESCRIPTION
       ===================================================== */

    .jfinHeroDescription {
        width: 100%;

        max-width: 200px;

        margin: 0 0 10px;

        padding: 0;

        color: #333;

        font-size: 7.5px;

        line-height: 1.35;

        display: -webkit-box;

        -webkit-line-clamp: 3;

        -webkit-box-orient: vertical;

        overflow: hidden;
    }


    /* =====================================================
       BUTTONS
       ===================================================== */

    .jfinHeroButtons {
        display: flex;

        align-items: center;

        gap: 7px;

        margin: 0;

        padding: 0;

        position: relative;

        z-index: 40;
    }


    .jfinHeroBtn {
        width: 94px;

        min-width: 94px;

        height: 40px;

        padding: 0 5px;

        border-radius: 25px;

        font-size: 11px;

        white-space: nowrap;
    }


    /* =====================================================
       MOBILE ARROWS
       ===================================================== */

    .jfinHeroNavigation {
        position: absolute;

        right: 10px;

        bottom: 9px;

        display: flex;

        gap: 8px;

        z-index: 100;
    }


    .jfinHeroArrow {
        width: 38px;

        height: 38px;

        font-size: 12px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .jfinHero {
        height: 225px !important;
    }


    .jfinHeroContent {
        padding: 15px 12px 10px !important;
    }


    .jfinHeroText {
        width: 53% !important;
    }


    .jfinHeroTitle {
        font-size: 17px !important;
    }


    .jfinHeroDescription {
        font-size: 7.2px;

        max-width: 195px;
    }


    .jfinHeroBtn {
        width: 90px;

        min-width: 90px;

        height: 39px;

        font-size: 10.5px;
    }


    .jfinHeroArrow {
        width: 37px;

        height: 37px;
    }
}


/* =========================================================
   360px
   ========================================================= */

@media (max-width: 360px) {

    .jfinHero {
        height: 220px !important;
    }


    .jfinHeroContent {
        padding: 14px 10px 8px !important;
    }


    .jfinHeroText {
        width: 54% !important;
    }


    .jfinHeroTitle {
        font-size: 16px !important;
    }


    .jfinHeroDescription {
        font-size: 7px;

        -webkit-line-clamp: 3;
    }


    .jfinHeroBtn {
        width: 83px;

        min-width: 83px;

        height: 37px;

        font-size: 10px;
    }


    .jfinHeroNavigation {
        right: 8px;

        bottom: 8px;
    }


    .jfinHeroArrow {
        width: 34px;

        height: 34px;
    }
}
/* =====================================================
   FIX HEADER OVERLAPPING HERO
   ===================================================== */

@media (max-width: 767px) {

    .jfinHero {
        margin-top: 67px !important;
        height: 225px !important;
        min-height: 225px !important;
    }

    .jfinHeroContent {
        padding-top: 12px !important;
    }

    .jfinHeroText {
        margin-top: 0 !important;
    }

    .jfinHeroLabel {
        margin-top: 0 !important;
    }

    .jfinHeroTitle {
        margin-top: 0 !important;
        transform: none !important;
        top: auto !important;
    }
}


/* =========================================
   SMALL MOBILE
   ========================================= */

@media (max-width: 480px) {

    .hero {
        height: 560px !important;
        min-height: 560px !important;
    }

    .hero .slide {
        height: 560px !important;
        min-height: 560px !important;

      
        background-position: right bottom !important;
    }

    .hero .hero-content {
        width: 65% !important;
        max-width: 65% !important;

        padding-top: 65px !important;
    }

    .hero .hero-content h1 {
        font-size: 23px !important;
    }

    .hero .hero-content p {
        font-size: 12px !important;
    }
}



/* =========================================================
   FINSERV FEATURE SECTION
   ========================================================= */

.finserv-wrapper {
    width: 100%;
    padding: 80px 20px;
    background: #ffffff;
    overflow: hidden;
}

.financial-services {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 575px) {

    .jf-prefer {
        padding: 45px 14px;
    }

    .jf-prefer .jf-section-heading {
        padding: 0 5px;
        margin-bottom: 28px;
    }

    .jf-prefer .eyebrow {
        font-size: 12px;
        letter-spacing: 1.2px;
    }

    .jf-prefer .jf-section-heading h2 {
        font-size: 25px;
        line-height: 1.3;
    }

    .jf-prefer .jf-section-heading p {
        font-size: 14px;
        line-height: 1.5;
    }

    .jf-prefer-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .jf-prefer-card {
        border-radius: 16px;
    }

    .jf-prefer-image {
        height: 200px;
    }

    .jf-prefer-content {
        padding: 20px 18px 22px;
    }

    .jf-prefer-content h3 {
        font-size: 18px;
    }

    .jf-prefer-content p {
        font-size: 14px;
    }
}


/* =========================================
   VERY SMALL MOBILE
========================================= */

@media (max-width: 375px) {

    .jf-prefer {
        padding-left: 12px;
        padding-right: 12px;
    }

    .jf-prefer .jf-section-heading h2 {
        font-size: 23px;
    }

    .jf-prefer-image {
        height: 185px;
    }
}
@media (max-width: 767px) {
    .jfinHeroSlider {
        width: 106% !important;
        height: 86% !important;
    }
}

/* ==========================================
   JFINMATE FAQ SECTION
========================================== */

.jf-faq {
    width: 100%;
    padding: 30px 24px 24px;
    margin: 0;
    background: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

.jf-faq *,
.jf-faq *::before,
.jf-faq *::after {
    box-sizing: border-box;
}

.jf-faq .jf-container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

/* Heading */

.jf-faq-heading {
    text-align: center;
    margin: 0 0 34px;
}

.jf-faq-heading h2 {
    margin: 0 0 5px;
    color: #2874f0;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.35;
}

.jf-faq-heading p {
    margin: 0;
    color: #555555;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

/* FAQ list */

.jf-faq-list {
    width: 100%;
    max-width: 770px;
    margin: 0 auto;
}

.jf-faq-item {
    width: 100%;
    margin: 0;
    border: 0;
    border-bottom: 1px solid transparent;
    background: transparent;
}

/* Question row */

.jf-faq-question {
    width: 100%;
    min-height: 51px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 4px;

    border: 0;
    border-radius: 0;
    outline: none;
    background: transparent;

    color: #333333;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;

    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.jf-faq-question > span:first-child {
    flex: 1;
    min-width: 0;
}

/* Plus / minus icon */

.jf-faq-toggle {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;

    color: #333333;
    font-family: Arial, sans-serif;
    font-size: 21px;
    font-weight: 400;
    line-height: 1;

    transition: transform 0.2s ease;
}

/* Answer */

.jf-faq-answer {
    display: none;
    padding: 0 30px 15px 4px;
}

.jf-faq-answer p {
    margin: 0;
    color: #6b6b6b;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.7;
}

/* Open item */

.jf-faq-item.active .jf-faq-answer {
    display: block;
}

.jf-faq-item.active .jf-faq-toggle {
    transform: rotate(45deg);
}

.jf-faq-question:focus-visible {
    outline: 2px solid #2874f0;
    outline-offset: 2px;
}

/* ==========================================
   TABLET
========================================== */

@media (max-width: 768px) {
    .jf-faq {
        padding: 28px 22px 24px;
    }

    .jf-faq-heading {
        margin-bottom: 25px;
    }

    .jf-faq-heading h2 {
        font-size: 22px;
    }

    .jf-faq-heading p {
        font-size: 12px;
    }

    .jf-faq-list {
        max-width: 100%;
    }

    .jf-faq-question {
        min-height: 50px;
        font-size: 13px;
    }
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 480px) {
    .jf-faq {
        padding: 27px 16px 25px;
    }

    .jf-faq-heading {
        margin-bottom: 23px;
    }

    .jf-faq-heading h2 {
        font-size: 21px;
        line-height: 1.35;
    }

    .jf-faq-heading p {
        max-width: 330px;
        margin: 0 auto;
        font-size: 12px;
        line-height: 1.6;
    }

    .jf-faq-question {
        min-height: 52px;
        padding: 13px 2px;
        gap: 12px;
        font-size: 12px;
    }

    .jf-faq-toggle {
        flex-basis: 18px;
        width: 18px;
        height: 18px;
        font-size: 20px;
    }

    .jf-faq-answer {
        padding: 0 24px 14px 2px;
    }

    .jf-faq-answer p {
        font-size: 12px;
        line-height: 1.65;
    }
}

/* Small phones */

@media (max-width: 360px) {
    .jf-faq {
        padding-right: 12px;
        padding-left: 12px;
    }

    .jf-faq-heading h2 {
        font-size: 19px;
    }

    .jf-faq-question {
        font-size: 11.5px;
    }
}

/* Fix excessive spacing between FAQ items */
.jf-faq {
    padding: 30px 24px 24px !important;
}

.jf-faq-heading {
    margin-bottom: 25px !important;
}

.jf-faq-list {
    max-width: 770px;
    margin: 0 auto;
}

.jf-faq-item {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
}

.jf-faq-question {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 15px 4px !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    font-size: 16px !important;
}

.jf-faq-answer {
    padding: 0 30px 14px 4px !important;
    margin: 0 !important;
}

.jf-faq-answer p {
    margin: 0 !important;
    line-height: 1.6 !important;
    font-size: 14px;
}

/* Mobile spacing */
@media (max-width: 576px) {
    .jf-faq {
        padding: 25px 16px 20px !important;
    }

    .jf-faq-heading {
        margin-bottom: 18px !important;
    }

    .jf-faq-question {
        padding: 13px 2px !important;
        font-size: 12px !important;
    }

    .jf-faq-answer {
        padding: 0 24px 12px 2px !important;
    }
}


/* =========================================
   REFER SUB HERO BANNER
========================================= */

.referSubHero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 423px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;

    padding: 35px 24px;

    background: linear-gradient(
        110deg,
        #1b59cf 0%,
        #1550be 60%,
        #1048ae 100%
    );

    font-family: Arial, Helvetica, sans-serif;
}

.referSubHero *,
.referSubHero *::before,
.referSubHero *::after {
    box-sizing: border-box;
}

/* LEFT DECORATIVE PATTERN */

.referSubPattern {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 24%;
    height: 100%;
    pointer-events: none;

    background-image: radial-gradient(
        circle,
        rgba(111, 180, 255, 0.35) 1.2px,
        transparent 1.6px
    );

    background-size: 13px 13px;

    -webkit-mask-image: linear-gradient(
        to right,
        #000 0%,
        rgba(0, 0, 0, 0.7) 50%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to right,
        #000 0%,
        rgba(0, 0, 0, 0.7) 50%,
        transparent 100%
    );
}

/* BUILDING IMAGE ON RIGHT */

.referSubBuilding {
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: 0;

    width: 25%;
    height: 94%;

    display: flex;
    align-items: flex-end;
    justify-content: flex-end;

    pointer-events: none;
}

.referSubBuilding img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: right bottom;

    opacity: 0.85;
}

/* CENTER CONTENT */

.referSubContent {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 720px;
    margin: 0 auto;

    text-align: center;
    color: #ffffff;
}

.referSubContent h2 {
    margin: 0 0 8px;

    color: #ffffff;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.05px;
}

.referSubContent p {
    margin: 0 auto 20px;
    max-width: 610px;

    color: rgba(255, 255, 255, 0.94);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

/* =========================================
   REFER SUB BANNER - FINAL UI UPDATE
========================================= */

/* Make building image transparent */
.referSubBuilding {
    opacity: 1 !important;
}

.referSubBuilding img {
    opacity: 0.45 !important;
    mix-blend-mode: screen;
    object-fit: contain;
    object-position: right bottom;
}

/* Increase button size and text */
.referSubButtons .referSubBtn {
    width: 175px !important;
    min-width: 175px !important;
    min-height: 44px !important;
    padding: 11px 16px !important;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;

    border-radius: 7px;
    box-sizing: border-box;
}

/* Increase icon size */
.referSubButtons .referSubBtn i {
    font-size: 16px !important;
}

/* Tablet */
@media (max-width: 991px) {
    .referSubButtons .referSubBtn {
        width: 165px !important;
        min-width: 165px !important;
        min-height: 43px !important;
        font-size: 12px !important;
    }

    .referSubBuilding img {
        opacity: 0.35 !important;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .referSubButtons {
        gap: 10px !important;
    }

    .referSubButtons .referSubBtn {
        width: 165px !important;
        min-width: 0 !important;
        min-height: 44px !important;
        padding: 10px 12px !important;
        font-size: 12px !important;
    }

    .referSubButtons .referSubBtn i {
        font-size: 15px !important;
    }

    .referSubBuilding img {
        opacity: 0.25 !important;
    }
}

/* Small phones */
@media (max-width: 360px) {
    .referSubButtons .referSubBtn {
        width: 145px !important;
        min-height: 42px !important;
        padding: 9px 8px !important;
        gap: 7px !important;
        font-size: 11px !important;
    }
}


/* BUTTONS */

.referSubButtons {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
}

.referSubBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: 146px;
    min-height: 35px;
    padding: 8px 12px;

    border: 1px solid #ffffff;
    border-radius: 7px;

    background: #ffffff;
    color: #2874f0 !important;
    -webkit-text-fill-color: #2874f0;

    font-size: 10px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.referSubBtn i {
    flex-shrink: 0;
    color: #2874f0;
    -webkit-text-fill-color: #2874f0;
    font-size: 13px;
}

.referSubBtn:hover {
    background: #edf4ff;
    border-color: #edf4ff;
    color: #1550be !important;
    -webkit-text-fill-color: #1550be;
    transform: translateY(-1px);
}

.referSubBtn:hover i {
    color: #1550be;
    -webkit-text-fill-color: #1550be;
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {
    .referSubHero {
        min-height: 235px;
        padding: 32px 22px;
    }

    .referSubContent {
        max-width: 640px;
    }

    .referSubContent h2 {
        font-size: 17px;
    }

    .referSubBuilding {
        width: 25%;
        height: 85%;
        opacity: 0.7;
    }

    .referSubContent p {
        max-width: 520px;
        font-size: 10px;
    }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {
    .referSubHero {
        min-height: 245px;
        padding: 30px 16px;

        background: linear-gradient(
            110deg,
            #1b59cf,
            #1048ae
        );
    }

    .referSubPattern {
        width: 32%;
        opacity: 0.65;
    }

    .referSubBuilding {
        width: 34%;
        height: 72%;
        opacity: 0.24;
    }

    .referSubContent {
        max-width: 100%;
    }

    .referSubContent h2 {
        font-size: 19px;
        line-height: 1.35;
        margin-bottom: 10px;
    }

    .referSubContent p {
        max-width: 430px;
        margin-bottom: 18px;
        font-size: 11px;
        line-height: 1.6;
    }

    .referSubDesktopBreak {
        display: none;
    }

    .referSubButtons {
        gap: 9px;
    }

    .referSubBtn {
        width: auto;
        min-width: 140px;
        min-height: 40px;
        padding: 9px 13px;
        font-size: 11px;
    }
}

/* SMALL PHONES */

@media (max-width: 380px) {
    .referSubHero {
        min-height: 235px;
        padding: 26px 12px;
    }

    .referSubContent h2 {
        font-size: 17px;
    }

    .referSubContent p {
        font-size: 10px;
    }

    .referSubButtons {
        gap: 7px;
    }

    .referSubBtn {
        min-width: 130px;
        padding: 8px 10px;
        gap: 7px;
        font-size: 10px;
    }

    .referSubBuilding {
        width: 38%;
        opacity: 0.18;
    }
}