:root {
            --navy: #071B3D;
            --navy2: #0B2C5E;
            --green: #33A835;
            --green2: #6DC24A;
            --amber: #F0A21E;
            --ice: #DCE7F5;
            --charcoal: #1A1D22;
            --slate: #6B7280;
            --offwhite: #F7F8FA;
            --white: #ffffff;
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: Arial, sans-serif;
            color: var(--navy);
            background: #fff;
            line-height: 1.6;
        }

        img {
            max-width: 100%;
            display: block;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        .container {
            width: min(1180px, 92%);
            margin: auto;
        }


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

        .header {
            height: 82px;
            background: rgba(255,255,255,.96);
            display: flex;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 999;
            border-bottom: 1px solid #edf1f5;
            backdrop-filter: blur(15px);
        }

        .header-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .logo img {
            width: 145px;
        }

        .nav {
            display: flex;
            align-items: center;
            gap: 34px;
        }

        .nav a {
            font-size: 14px;
            font-weight: 600;
            color: var(--navy);
            position: relative;
        }

        .nav a:hover,
        .nav a.active {
            color: var(--green);
        }

        .nav a.active:after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -10px;
            width: 100%;
            height: 2px;
            background: var(--green);
        }

        .apply-btn {
            background: linear-gradient(135deg, var(--green), #23a544);
            color: #fff !important;
            padding: 13px 23px;
            border-radius: 50px;
            font-weight: 700 !important;
            box-shadow: 0 8px 20px rgba(51,168,53,.22);
            transition: .3s;
        }

        .apply-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 25px rgba(51,168,53,.3);
        }


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

        .hero {
            min-height: 600px;
            position: relative;
            overflow: hidden;
            background-color: #f4faff;
            background-image:
                linear-gradient(90deg,
                    #f4faff 0%,
                    #f4faffe6 34%,
                    rgba(244,250,255,.34) 45%,
                    rgba(244,250,255,.50) 56%,
                    rgba(244,250,255,0) 72%),
                url("../try1.jpg");
            background-position: center, right center;
            background-size: cover, cover;
            background-repeat: no-repeat;
        }

        .hero:after {
            display: none;
        }

        .hero-inner {
            min-height: 560px;
            display: flex;
            align-items: center;
            position: relative;
            z-index: 2;
        }

        .hero-content {
            width: 54%;
            padding: 50px 0;
        }

        .eyebrow {
            color: var(--green);
            text-transform: uppercase;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: .8px;
            margin-bottom: 8px;
        }

        .hero h1 {
            font-size: clamp(44px, 5vw, 68px);
            line-height: 1.02;
            letter-spacing: -2px;
            color: var(--navy);
            margin-bottom: 18px;
        }

        .hero h1 span {
            color: var(--green);
        }

        .hero-subtitle {
            font-size: 21px;
            line-height: 1.35;
            font-weight: 700;
            color: var(--navy2);
            max-width: 600px;
            margin-bottom: 14px;
        }

        .hero-description {
            color: #40536b;
            font-size: 15px;
            max-width: 590px;
            margin-bottom: 26px;
        }

        .hero-buttons {
            display: flex;
            gap: 14px;
            margin-bottom: 28px;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 14px 25px;
            border-radius: 50px;
            font-weight: 700;
            transition: .3s;
        }

        .btn-primary {
            background: var(--green);
            color: #fff;
            box-shadow: 0 10px 25px rgba(51,168,53,.25);
        }

        .btn-primary:hover {
            transform: translateY(-3px);
        }

        .btn-outline {
            color: var(--navy);
            border: 1.5px solid #9fc0e7;
            background: rgba(255,255,255,.7);
        }

        .btn-outline:hover {
            background: #fff;
        }

        .hero-features {
            display: flex;
            flex-wrap: wrap;
            gap: 25px;
        }

        .hero-feature {
            display: flex;
            align-items: center;
            gap: 9px;
            font-size: 13px;
            font-weight: 700;
        }

        .hero-feature i {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #effaf0;
            color: var(--green);
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #bfe6c1;
        }

        .loan-card {
            position: absolute;
            right: 6%;
            top: 60%;
            transform: translateY(-50%);
            width: 250px;
            padding: 25px;
            background: rgba(255,255,255,.96);
            border-radius: 20px;
            box-shadow: 0 25px 70px rgba(7,27,61,.22);
            z-index: 5;
        }

        .loan-card small {
            color: var(--slate);
            font-weight: 700;
        }

        .loan-card h3 {
            font-size: 24px;
            margin: 4px 0 18px;
        }

        .loan-check {
            display: flex;
            align-items: center;
            gap: 9px;
            font-size: 12px;
            font-weight: 600;
            margin: 11px 0;
        }

        .loan-check i {
            color: var(--green);
        }


        /* =========================
           SECTION COMMON
        ========================= */

        section {
            padding: 85px 0;
        }

        .section-label {
            color: var(--green);
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }

        .section-title {
            font-size: 42px;
            line-height: 1.1;
            letter-spacing: -1px;
            margin-bottom: 16px;
        }

        .section-title span {
            color: var(--green);
        }

        .section-text {
            color: var(--slate);
            max-width: 650px;
            font-size: 15px;
        }


        /* =========================
           WHY CHOOSE
        ========================= */

        .why-section {
            background: #fff;
        }

        .why-grid {
            display: grid;
            grid-template-columns: .9fr 1.6fr;
            gap: 65px;
            align-items: center;
        }

        .handwritten {
            font-family: "Caveat", cursive;
            font-size: 27px;
            margin-top: 28px;
            display: inline-block;
            color: var(--navy);
            position: relative;
        }

        .handwritten:after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -5px;
            width: 100px;
            height: 4px;
            background: var(--green);
            border-radius: 100%;
            transform: rotate(-3deg);
        }

        .benefit-grid {
            display: grid;
            grid-template-columns: repeat(3,1fr);
            gap: 15px;
        }

        .benefit-card {
            padding: 23px;
            border: 1px solid #dce9f5;
            border-radius: 15px;
            background: linear-gradient(145deg,#fff,#f7fbff);
            transition: .3s;
            position: relative;
            overflow: hidden;
        }

        .benefit-card:hover {
            transform: translateY(-7px);
            box-shadow: 0 18px 40px rgba(7,27,61,.1);
            border-color: #b9d8f5;
        }

        .benefit-number {
            position: absolute;
            right: 15px;
            top: 12px;
            color: #b8c8da;
            font-size: 11px;
            font-weight: 800;
        }

        .benefit-icon {
            width: 43px;
            height: 43px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #ecf9ee;
            color: var(--green);
            font-size: 18px;
            margin-bottom: 13px;
        }

        .benefit-card h3 {
            font-size: 16px;
            margin-bottom: 7px;
        }

        .benefit-card p {
            color: var(--slate);
            font-size: 12px;
            line-height: 1.55;
        }


        /* =========================
           HOW IT WORKS
        ========================= */

        .process-section {
            position: relative;
            background:
                linear-gradient(rgba(7,27,61,.9),rgba(7,27,61,.93)),
                url("../process-bg.jpg") center/cover;
            color: #fff;
            overflow: hidden;
        }

        .process-section:before {
            content: "";
            position: absolute;
            left: -5%;
            right: -5%;
            bottom: -55px;
            height: 100px;
            background: #fff;
            border-radius: 50% 50% 0 0;
        }

        .process-section .section-label {
            color: var(--green2);
        }

        .process-section .section-text {
            color: #c8d5e6;
        }

        .process-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 45px;
        }

        .process-top .section-title {
            margin-bottom: 10px;
        }

        .process-btn {
            white-space: nowrap;
        }

        .steps {
            display: grid;
            grid-template-columns: repeat(5,1fr);
            gap: 20px;
            position: relative;
        }

        .steps:before {
            content: "";
            position: absolute;
            top: 26px;
            left: 9%;
            right: 9%;
            height: 2px;
            background: rgba(109,194,74,.65);
        }

        .step {
            text-align: center;
            position: relative;
            z-index: 2;
        }

        .step-number {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background: var(--green);
            color: #fff;
            margin: auto auto 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            border: 5px solid rgba(255,255,255,.12);
            box-shadow: 0 0 0 2px var(--green);
        }

        .step h3 {
            font-size: 14px;
            margin-bottom: 6px;
        }

        .step p {
            color: #b9c7d9;
            font-size: 11px;
            line-height: 1.5;
        }


        /* =========================
           REQUIREMENTS
        ========================= */

        .requirements-grid {
            display: grid;
            grid-template-columns: 1.25fr .75fr 1.25fr;
            gap: 40px;
            align-items: center;
        }

        .requirements-list {
            display: grid;
            grid-template-columns: repeat(2,1fr);
            gap: 12px;
            margin-top: 25px;
        }

        .requirement {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px;
            border: 1px solid #dce9f5;
            border-radius: 13px;
            background: #fff;
        }

        .requirement-icon {
            width: 40px;
            height: 40px;
            flex: 0 0 40px;
            border-radius: 50%;
            background: #eff9f0;
            color: var(--green);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .requirement h4 {
            font-size: 12px;
        }

        .requirement p {
            font-size: 10px;
            color: var(--slate);
            line-height: 1.4;
        }

        .goal-card {
            height: 435px;
            border-radius: 22px;
            overflow: hidden;
            position: relative;
            background:
                linear-gradient(145deg,rgba(51,168,53,.1),rgba(220,231,245,.4)),
                url("../loan-req.jpg") center/cover;
        }

        .goal-content {
            position: absolute;
            left: 20px;
            top: 20px;
            width: 170px;
        }

        .goal-content h3 {
            font-family: "Caveat", cursive;
            font-size: 30px;
            line-height: 1;
        }

        .goal-content p {
            font-size: 12px;
            margin-top: 8px;
        }

        .faq-list {
            margin-top: 25px;
        }

        .faq {
            border-bottom: 1px solid #dce4ed;
            padding: 14px 0;
            display: flex;
            justify-content: space-between;
            gap: 15px;
            font-size: 13px;
            font-weight: 600;
        }

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

        .faq {
            cursor: pointer;
            align-items: center;
        }

        .faq i {
            transition: transform .3s ease;
            flex-shrink: 0;
        }

        .faq.active i {
            transform: rotate(45deg);
        }

        .faq-answer {
            display: none;
            color: var(--slate);
            font-size: 12px;
            line-height: 1.6;
            padding: 0 35px 14px 0;
        }

        .faq.active + .faq-answer {
            display: block;
        }


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

        .testimonials {
            background: #eef7ff;
            position: relative;
            overflow: hidden;
        }

        .testimonial-header {
            margin-bottom: 30px;
        }

        /* Horizontal Testimonials Slider */
        .testimonial-grid {
            display: flex !important;
            flex-wrap: nowrap !important;
            gap: 18px;
            width: 100%;
            overflow-x: scroll !important;
            overflow-y: hidden;
            scroll-behavior: smooth;
            scroll-snap-type: x mandatory;
            padding: 5px 5px 20px;
            cursor: grab;
            -webkit-overflow-scrolling: touch;
        }

        /* While dragging */
        .testimonial-grid:active {
            cursor: grabbing;
        }

        /* Cards */
        .testimonial-grid .testimonial {
            flex: 0 0 calc((100% - 36px) / 3) !important;
            width: calc((100% - 36px) / 3);
            min-width: calc((100% - 36px) / 3);
            max-width: calc((100% - 36px) / 3);
            scroll-snap-align: start;

            background: #fff;
            padding: 25px;
            border-radius: 17px;
            border: 1px solid #dce9f5;
            position: relative;
            box-sizing: border-box;
        }

        /* Scrollbar */
        .testimonial-grid::-webkit-scrollbar {
            height: 8px;
        }

        .testimonial-grid::-webkit-scrollbar-track {
            background: #e5edf5;
            border-radius: 20px;
        }

        .testimonial-grid::-webkit-scrollbar-thumb {
            background: #b8c8da;
            border-radius: 20px;
        }

        .testimonial-grid::-webkit-scrollbar-thumb:hover {
            background: #8fa8c2;
        }

        /* Quote */
        .quote {
            font-size: 38px;
            line-height: 1;
            color: var(--green);
            font-weight: 800;
        }

        /* Text */
        .testimonial p {
            color: #526174;
            font-size: 13px;
            line-height: 1.6;
            margin: 8px 0 18px;
        }

        /* Customer */
        .customer {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .customer-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: var(--ice);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--navy);
            flex-shrink: 0;
        }

        .customer strong {
            display: block;
            font-size: 12px;
        }

        .customer span {
            color: var(--slate);
            font-size: 10px;
        }

        .stars {
            color: var(--amber);
            font-size: 11px;
            margin-top: 3px;
        }




/* =========================
   PREMIUM CTA SECTION
========================= */
/* =========================================
   PREMIUM CTA SECTION
========================================= */

.cta {
    position: relative;
    padding: 70px 0;
    overflow: hidden;
    background: #f5f9fc;
}

.cta .container {
    max-width: 1180px;
    margin: 0 auto;
}


/* Main CTA Box */

.cta-box {
    position: relative;
    min-height: 330px;
    padding: 55px 65px;
    border-radius: 28px;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(51, 168, 53, 0.20),
            transparent 28%
        ),
        linear-gradient(
            120deg,
            #061b3a 0%,
            #092c58 55%,
            #063c42 100%
        );

    box-shadow:
        0 25px 60px rgba(6, 27, 58, 0.18);
}


/* Decorative circle */

.cta-box::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -170px;
    top: -220px;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 50%;
}


/* Second decorative circle */

.cta-box::after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    right: 80px;
    bottom: -180px;

    border: 1px solid rgba(51,168,53,.18);
    border-radius: 50%;
}


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

.cta-content {
    position: relative;
    z-index: 2;
    max-width: 620px;
}


.cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 18px;
    padding: 7px 13px;

    border: 1px solid rgba(255,255,255,.15);
    border-radius: 30px;

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

    color: #8ee58f;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}


.cta-badge i {
    font-size: 11px;
}


.cta h2 {
    margin: 0 0 16px;

    color: #ffffff;

    font-size: 44px;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -1px;
}


.cta h2 span {
    color: #45c94b;
}


.cta p {
    max-width: 570px;

    margin: 0 0 28px;

    color: rgba(255,255,255,.72);

    font-size: 16px;
    line-height: 1.7;
}


/* =========================================
   BUTTON
========================================= */

.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 14px 24px;

    border-radius: 10px;

    background: #33a835;
    color: #ffffff;

    font-size: 14px;
    font-weight: 700;
    text-decoration: none;

    box-shadow: 0 10px 25px rgba(51,168,53,.25);

    transition: all .3s ease;
}


.cta-btn i {
    transition: transform .3s ease;
}


.cta-btn:hover {
    background: #42bd48;
    color: #ffffff;
    transform: translateY(-3px);

    box-shadow: 0 15px 30px rgba(51,168,53,.30);
}


.cta-btn:hover i {
    transform: translateX(5px);
}


/* =========================================
   RIGHT HIGHLIGHT CARD
========================================= */

.cta-highlight {
    position: relative;
    z-index: 3;

    width: 340px;
    min-width: 340px;

    padding: 24px;

    display: flex;
    align-items: center;
    gap: 17px;

    border: 1px solid rgba(255,255,255,.13);
    border-radius: 18px;

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

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

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


.cta-icon {
    width: 55px;
    height: 55px;
    min-width: 55px;

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

    border-radius: 15px;

    background: #33a835;

    color: #ffffff;

    font-size: 22px;

    box-shadow: 0 8px 20px rgba(51,168,53,.25);
}


.cta-highlight-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.cta-highlight-text strong {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
}


.cta-highlight-text span {
    color: rgba(255,255,255,.60);
    font-size: 12px;
    line-height: 1.5;
}


.cta-arrow {
    margin-left: auto;

    width: 35px;
    height: 35px;
    min-width: 35px;

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

    border-radius: 50%;

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

    color: #8ee58f;

    font-size: 12px;
}


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

@media (max-width: 900px) {

    .cta {
        padding: 55px 20px;
    }

    .cta-box {
        padding: 45px 40px;
        flex-direction: column;
        align-items: flex-start;
    }

    .cta-highlight {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

}


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

@media (max-width: 600px) {

    .cta {
        padding: 40px 15px;
    }

    .cta-box {
        min-height: auto;
        padding: 35px 25px;
        border-radius: 22px;
        gap: 30px;
    }

    .cta-badge {
        font-size: 9px;
        margin-bottom: 15px;
    }

    .cta h2 {
        font-size: 32px;
        line-height: 1.15;
    }

    .cta p {
        font-size: 14px;
        line-height: 1.65;
    }

    .cta-btn {
        padding: 13px 21px;
    }

    .cta-highlight {
        padding: 18px;
        gap: 12px;
        border-radius: 15px;
    }

    .cta-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
        font-size: 18px;
    }

    .cta-highlight-text strong {
        font-size: 13px;
    }

    .cta-highlight-text span {
        font-size: 11px;
    }

    .cta-arrow {
        display: none;
    }

}

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

        .footer {
            background: var(--navy);
            color: #fff;
            padding: 48px 0 18px;
            position: relative;
            overflow: hidden;
        }

        .footer:before {
            content: "";
            position: absolute;
            top: -32px;
            left: -5%;
            width: 110%;
            height: 55px;
            background: var(--green);
            border-radius: 50%;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.45fr 1fr 1fr 1.05fr;
            gap: 30px;
            position: relative;
            align-items: start;
        }

        .footer-logo {
            width: 160px;
            margin-bottom: 12px;
        }

        .footer-tagline {
            font-family: "Caveat", cursive;
            font-size: 21px;
            color: #dce7f5;
        }

        .footer h4 {
            font-size: 14px;
            margin: 2px 0 16px;
        }

        .footer ul {
            list-style: none;
        }

        .footer li {
            margin: 0 0 11px;
        }

        .footer li a {
            color: #b8c7d9;
            font-size: 12px;
        }

        .footer-contact {
            color: #b8c7d9;
            font-size: 12px;
            line-height: 2;
        }

        .footer-social-text {
            display: block !important;
            width: 100% !important;
            margin-top: 14px !important;
            margin-bottom: 0 !important;
            color: #fff;
            font-size: 12px;
            line-height: 1.6;
        }

        .social {
            display: flex;
            gap: 8px;
            margin-top: 15px;
        }

        .social a {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,.2);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: .3s;
        }

        .social a:hover {
            background: var(--green);
            border-color: var(--green);
        }

        .copyright {
            border-top: 1px solid rgba(255,255,255,.12);
            margin-top: 28px;
            padding-top: 16px;
            display: flex;
            justify-content: space-between;
            color: #8fa0b6;
            font-size: 11px;
        }


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

        .mobile-menu {
            display: none;
            font-size: 24px;
            color: var(--navy);
        }

        @media(max-width: 1000px) {

            .nav {
                gap: 17px;
            }

            .hero-content {
                width: 62%;
            }

            .loan-card {
                right: 2%;
            }

            .why-grid {
                grid-template-columns: 1fr;
            }

            .requirements-grid {
                grid-template-columns: 1fr 1fr;
            }

            .requirements-grid > div:last-child {
                grid-column: span 2;
            }

        }


        @media(max-width: 768px) {

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

            .header {
                height: 70px;
            }

            .nav {
                display: none;
            }

            .mobile-menu {
                display: block;
            }

            .hero {
                min-height: auto;
            background-image:
                linear-gradient(180deg,
                    rgba(244,250,255,.94) 0%,
                    rgba(244,250,255,.78) 42%,
                    rgba(244,250,255,.48) 100%),
                url("../try1.jpg");
            background-position: center, center center;
            background-size: cover, cover;
        }

        .hero:after {
            display: none;
        }

            .hero-inner {
                min-height: auto;
            }

            .hero-content {
                width: 100%;
                padding: 65px 0 50px;
            }

            .hero h1 {
                font-size: 48px;
            }

            .loan-card {
                position: relative;
                right: auto;
                top: auto;
                transform: none;
                width: 100%;
                margin-top: 30px;
            }

            .hero-buttons {
                flex-wrap: wrap;
            }

            .hero-features {
                gap: 13px;
            }

            section {
                padding: 65px 0;
            }

            .section-title {
                font-size: 35px;
            }

            .benefit-grid {
                grid-template-columns: repeat(2,1fr);
            }

            .process-top {
                display: block;
            }

            .process-btn {
                margin-top: 20px;
            }

            .steps {
                grid-template-columns: 1fr;
                gap: 25px;
            }

            .steps:before {
                display: none;
            }

            .requirements-grid {
                grid-template-columns: 1fr;
            }

            .requirements-grid > div:last-child {
                grid-column: auto;
            }

               .testimonial-grid .testimonial {
                    flex: 0 0 85% !important;
                    width: 85%;
                    min-width: 85%;
                    max-width: 85%;
                }

            }
        }


        @media(max-width: 520px) {

            .logo img {
                width: 145px;
            }

            .hero h1 {
                font-size: 41px;
            }

            .hero-subtitle {
                font-size: 18px;
            }

            .benefit-grid {
                grid-template-columns: 1fr;
            }

            .requirements-list {
                grid-template-columns: 1fr;
            }

            .footer-grid {
                grid-template-columns: 1fr;
            }

            .copyright {
                display: block;
            }

            .copyright div {
                margin-top: 8px;
            }
        }

        /* =========================================
   PREMIUM LOAN APPLICATION MODAL
========================================= */

.loan-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;

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

    padding: 20px;

    visibility: hidden;
    opacity: 0;

    transition: opacity .3s ease, visibility .3s ease;
}


.loan-modal.active {
    visibility: visible;
    opacity: 1;
}


/* DARK BACKGROUND */

.loan-modal-overlay {
    position: absolute;
    inset: 0;

    background: rgba(3, 18, 40, .78);

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}


/* MODAL BOX */

.loan-modal-box {
    position: relative;
    z-index: 2;

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

    max-height: calc(100vh - 40px);

    overflow-y: auto;

    padding: 35px;

    border-radius: 24px;

    background: #ffffff;

    box-shadow:
        0 30px 90px rgba(0,0,0,.30);

    transform: translateY(25px) scale(.97);

    transition: transform .35s ease;
}


.loan-modal.active .loan-modal-box {
    transform: translateY(0) scale(1);
}


/* CLOSE */

.loan-modal-close {
    position: absolute;

    top: 18px;
    right: 18px;

    width: 38px;
    height: 38px;

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

    border: 0;
    border-radius: 50%;

    background: #f1f5f9;

    color: #506070;

    font-size: 16px;

    cursor: pointer;

    transition: all .25s ease;
}


.loan-modal-close:hover {
    background: #e9eef3;

    color: #071d3d;

    transform: rotate(90deg);
}


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

.loan-modal-header {
    display: flex;
    align-items: center;
    gap: 17px;

    padding-right: 45px;

    margin-bottom: 28px;
}


.loan-modal-icon {
    width: 58px;
    height: 58px;
    min-width: 58px;

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

    border-radius: 16px;

    background: linear-gradient(
        135deg,
        #33a835,
        #45c84b
    );

    color: #ffffff;

    font-size: 23px;

    box-shadow:
        0 10px 25px rgba(51,168,53,.25);
}


.loan-modal-header span {
    display: block;

    margin-bottom: 4px;

    color: #33a835;

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

    letter-spacing: 1.2px;
}


.loan-modal-header h3 {
    margin: 0;

    color: #071d3d;

    font-size: 25px;
    line-height: 1.2;

    font-weight: 800;
}


.loan-modal-header p {
    margin: 6px 0 0;

    color: #718096;

    font-size: 13px;

    line-height: 1.5;
}


/* =========================================
   FORM
========================================= */

.loan-form-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;
}


.loan-field {
    width: 100%;
}


.loan-field-full {
    grid-column: 1 / -1;
}


.loan-field label {
    display: block;

    margin-bottom: 7px;

    color: #24364b;

    font-size: 12px;
    font-weight: 700;
}


/* INPUT */

.loan-input {
    position: relative;

    display: flex;
    align-items: center;

    height: 48px;

    border: 1px solid #dbe4ed;

    border-radius: 10px;

    background: #f9fbfd;

    transition: all .25s ease;
}


.loan-input i {
    width: 45px;

    text-align: center;

    color: #7a8a9b;

    font-size: 14px;
}


.loan-input input,
.loan-input select {
    width: 100%;
    height: 100%;

    padding: 0 12px 0 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: #1c2d40;

    font-family: inherit;

    font-size: 13px;
}


.loan-input input::placeholder {
    color: #a4afbb;
}


.loan-input select {
    cursor: pointer;
}


.loan-input:focus-within {
    border-color: #33a835;

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(51,168,53,.10);
}


/* =========================================
   TRUST
========================================= */

.loan-modal-trust {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 20px;

    color: #7b8998;

    font-size: 11px;
}


.loan-modal-trust i {
    color: #33a835;
}


/* =========================================
   SUBMIT
========================================= */

.loan-submit-btn {
    width: 100%;

    height: 52px;

    margin-top: 18px;

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

    gap: 12px;

    border: 0;
    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #33a835,
            #42bb48
        );

    color: #ffffff;

    font-family: inherit;

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

    cursor: pointer;

    box-shadow:
        0 10px 25px rgba(51,168,53,.25);

    transition: all .3s ease;
}


.loan-submit-btn i {
    transition: transform .3s ease;
}


.loan-submit-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 15px 30px rgba(51,168,53,.30);
}


.loan-submit-btn:hover i {
    transform: translateX(5px);
}


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

@media (max-width: 600px) {

    .loan-modal {
        padding: 12px;
    }

    .loan-modal-box {
        padding: 25px 20px;

        border-radius: 20px;

        max-height: calc(100vh - 24px);
    }

    .loan-modal-header {
        padding-right: 35px;

        gap: 12px;

        margin-bottom: 23px;
    }

    .loan-modal-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;

        border-radius: 13px;

        font-size: 19px;
    }

    .loan-modal-header h3 {
        font-size: 21px;
    }

    .loan-modal-header p {
        font-size: 12px;
    }

    .loan-form-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .loan-field-full {
        grid-column: auto;
    }

}




/*loan css start
*/


        /* =========================================
   LOAN CALCULATOR PAGE
========================================= */

.loan-calculator-section {
    background: #fff;
    padding: 10px 0 50px;
}



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

.plan-label {
    width: max-content;
    margin: 5px auto 20px;
    padding: 3px 14px;
    border: 1px solid #0B2C5E;
    border-radius: 20px;
    color: #23a544;
    font-size: 9px;
    letter-spacing: 3px;
    font-weight: 600;
}

.plan-label span {
    letter-spacing: 0;
}


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

.calculator-title {
    text-align: center;
    font-size: 32px;
    line-height: 1.2;
    font-weight: 600;
    color: #111;
    margin: 0 0 38px;
}


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

.calculator-grid {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 16px;
    align-items: start;
}


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

.calculator-left {
    border: 1px solid #dce3e8;
    border-radius: 8px;
    padding: 24px 23px;
    min-height: 380px;
    box-sizing: border-box;
}


/* =========================================
   CONTROL
========================================= */

.loan-control {
    margin-bottom: 28px;
}

.loan-control:last-child {
    margin-bottom: 0;
}

.control-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.control-label {
    font-size: 12px;
    color: #18263b;
}

.limit-label {
    background: #fff0f4;
    color: #23a544;
    font-size: 8px;
    font-weight: 600;
    padding: 5px 8px;
    border-radius: 3px;
    white-space: nowrap;
}

.control-value {
    color: #23a544;
    font-size: 25px;
    line-height: 1.2;
    font-weight: 700;
    margin: 13px 0 16px;
}


/* =========================================
   RANGE
========================================= */

.range-line {
    height: 4px;
    background: #dfebf0;
    border-radius: 5px;
    position: relative;
}

.range-fill {
    height: 4px;
    background: #23a544;
    border-radius: 5px;
    position: absolute;
    left: 0;
    top: 0;
}

.amount-fill {
    width: 20%;
}

.tenure-fill {
    width: 39%;
}

.interest-fill {
    width: 50%;
}

.range-dot {
    position: absolute;
    width: 9px;
    height: 9px;
    background: #23a544;
    border: 2px solid #fff;
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 1px #23a544;
}

.amount-dot {
    left: 20%;
}

.tenure-dot {
    left: 39%;
}

.interest-dot {
    left: 50%;
}

.range-values {
    display: flex;
    justify-content: space-between;
    margin-top: 9px;
}

.range-values span {
    font-size: 12px;
    color: #7d858d;
}


/* =========================================
   RIGHT SIDE
========================================= */

.calculator-right {
    display: flex;
    flex-direction: column;
    gap: 26px;
}


/* =========================================
   SUMMARY
========================================= */

.summary-box {
   /* background: #fff0f3;*/
    border: 1px solid #071B3D;
    border-radius: 7px;
    padding: 21px 20px;
    background: radial-gradient(
            circle at 85% 20%,
            rgba(51, 168, 53, 0.20),
            transparent 28%
        ),
        linear-gradient(
            120deg,
            #061b3a 0%,
            #092c58 55%,
            #063c42 100%
        );
        color: #fff;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.summary-row span {
    color: #fff;
    font-size: 12px;
}

.summary-row strong {
    color: #23a544;
    font-size: 12px;
}

.summary-divider {
    height: 1px;
    background: #071b3d;
    margin: 15px 0;
}

.total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 21px;
}

.total-row span {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

.total-row strong {
    font-size: 17px;
    color: #23a544;
}

.fund-btn {
    display: block;
    width: 100%;
    text-align: center;
    background: #23a544;
    color: #fff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    padding: 9px 10px;
    border-radius: 20px;
    box-sizing: border-box;
}


/* =========================================
   RATE & CHARGES
========================================= */

.charges-box {
    border: 1px solid #dce3e8;
    border-radius: 7px;
    padding: 21px 20px;
}

.charges-box h3 {
    margin: 0;
    font-size: 12px;
    color: #18263b;
}

.charges-divider {
    height: 1px;
    background: #e5e8eb;
    margin: 14px 0;
}

.charges-box ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.charges-box li {
    font-size: 12px;
    color: #536070;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.charges-box li:last-child {
    margin-bottom: 0;
}

.charges-box li i {
    color: #23a544;
    font-size: 9px;
}


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

@media (max-width: 768px) {

    .header-inner {
        height: auto;
        padding-top: 12px;
        padding-bottom: 12px;
        flex-direction: column;
        gap: 15px;
    }

    .main-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

    .nav-divider {
        display: none;
    }

    .calculator-title {
        font-size: 27px;
    }

    .calculator-grid {
        grid-template-columns: 1fr;
    }

    .calculator-left {
        min-height: auto;
    }

}

/*loan css end*/
/*header css start*/
@media (max-width: 767px) {
@media (max-width: 767px) {

    .header {
        padding: 40px 15px;
        position: relative;
    }

    .header-inner {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }

    /* LOGO */
    .header .logo {
        display: flex !important;
        align-items: center !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .header .logo img {
        width: 145px !important;
        height: auto !important;
        display: block !important;
        margin: 0 !important;
    }

    /* NAV MENU */
    .header .nav {
        display: none;

        position: absolute;
        top: 100%;
        left: 0;

        width: 100%;

        background: #fff;

        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;

        gap: 0 !important;

        padding: 10px 20px 15px !important;
        margin: 0 !important;

        box-shadow: 0 5px 15px rgba(0,0,0,0.10);

        z-index: 9999;
    }

    /* EACH LINK */
    .header .nav > a {
        display: flex !important;

        width: 100% !important;

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

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

        border-bottom: 1px solid #eee;

        text-align: left !important;
    }

    /* APPLY BUTTON */
    .header .nav > .apply-btn {
        width: fit-content !important;

        margin-top: 12px !important;

        padding: 10px 18px !important;

        border-bottom: none !important;

        justify-content: center !important;
    }

    /* HAMBURGER */
    .header .mobile-menu {
        display: flex !important;

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

        width: 40px !important;
        height: 40px !important;

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

        font-size: 24px !important;

        cursor: pointer;

        z-index: 10000;
    }

}




/*header css end*/