:root {
  --navy : #071a3d;--navy2 : #0d2c61;--red : #e21d2b;--red2 : #c91220;--text : #17233b;--muted : #69758b;--light : #f5f7fb;--border : #e5e9f1;--white : #fff
}
* {
  box-sizing : border-box
}
html {
  scroll-behavior : smooth
}
body {
  margin : 0;
  font-family : Inter, Arial, sans-serif;
  color : var(--text);
  background : #fff;
  line-height : 1.6
}
a {
  text-decoration : none;
  color : inherit
}
.container {
  width : min(1160px, 92%);
  margin : auto
}
.header {
  height : 76px;
  background : var(--navy);
  color : #fff;
  position : sticky;
  top : 0;
  z-index : 50;
  box-shadow : 0 4px 18px #00102c33
}
.nav {
  height : 76px;
  display : flex;
  align-items : center;
  justify-content : space-between;
  gap : 30px
}
.logo {
  display : flex;
  align-items : center;
  gap : 10px;
  font-size : 22px;
  font-weight : 800;
  letter-spacing : -.5px
}
  .logo>span : last-child>span {
  color : #ff4754
}
.logo-mark {
  display : grid;
  place-items : center;
  width : 35px;
  height : 35px;
  border-radius : 9px;
  background : var(--red);
  color : #fff;
  font-weight : 800
}
.nav-links {
  display : flex;
  gap : 30px;
  margin-left : auto
}
.nav-links a {
  font-size : 14px;
  color : #dce5f7
}
  .nav-links a : hover {
  color : #fff
}
.btn {
  display : inline-flex;
  align-items : center;
  justify-content : center;
  border : 0;
  border-radius : 8px;
  padding : 12px 22px;
  font-weight : 700;
  cursor : pointer;
  transition : .2s
}
.btn-red {
  background : var(--red);
  color : #fff;
  box-shadow : 0 8px 20px #e21d2b33
}
  .btn-red : hover {
  background : var(--red2);
  transform : translateY(-1px)
}
.btn-lg {
  padding : 15px 25px
}
.nav-btn {
  padding : 10px 18px
}
.menu-btn {
  display : none;
  background : none;
  border : 0;
  color : #fff;
  font-size : 26px
}
.hero {
  background : linear-gradient(125deg, var(--navy) 0%, #0b2858 58%, #102f66 100%);
  color : #fff;
  min-height : 610px;
  display : flex;
  align-items : center;
  overflow : hidden
}
.hero-grid {
  display : grid;
  grid-template-columns : 1.05fr .95fr;
  gap : 60px;
  align-items : center;
  padding : 72px 0
}
.eyebrow {
  display : inline-flex;
  align-items : center;
  gap : 8px;
  color : var(--red);
  font-size : 12px;
  font-weight : 800;
  letter-spacing : 1.4px
}
.hero .eyebrow {
  color : #ff6570;
  background : #ffffff0c;
  border : 1px solid #ffffff1c;
  padding : 8px 12px;
  border-radius : 30px
}
.hero h1 {
  font-size : 52px;
  line-height : 1.08;
  letter-spacing : -2px;
  margin : 22px 0 18px;
  max-width : 650px
}
.hero h1 span {
  color : #ff3b49
}
.hero-text {
  font-size : 17px;
  color : #cbd6e9;
  max-width : 590px
}
.hero-actions {
  display : flex;
  align-items : center;
  gap : 25px;
  margin : 30px 0
}
.text-link {
  font-weight : 600;
  color : #fff
}
  .text-link : hover {
  text-decoration : underline
}
.trust-row {
  display : flex;
  gap : 35px;
  margin-top : 36px
}
.trust-row div {
  display : flex;
  flex-direction : column
}
.trust-row strong {
  font-size : 20px
}
.trust-row small {
  font-size : 11px;
  color : #aebbd0
}
.hero-card-wrap {
  position : relative
}
.hero-glow {
  position : absolute;
  width : 390px;
  height : 390px;
  border-radius : 50%;
  background : #e21d2b22;
  filter : blur(10px);
  right : -50px;
  top : -40px
}
.apply-card {
  position : relative;
  background : #fff;
  color : var(--text);
  border-radius : 18px;
  padding : 28px;
  box-shadow : 0 25px 70px #00000045;
  max-width : 470px;
  margin-left : auto
}
.card-head {
  display : flex;
  justify-content : space-between;
  gap : 10px;
  align-items : flex-start;
  margin-bottom : 20px
}
.small-label {
  font-size : 10px;
  letter-spacing : 1.5px;
  color : var(--red);
  font-weight : 800
}
.card-head h3 {
  margin : 3px 0;
  font-size : 23px
}
.secure {
  font-size : 11px;
  color : #2e8550;
  background : #e9f8ef;
  padding : 5px 8px;
  border-radius : 20px;
  white-space : nowrap
}
.apply-card label, .application-form label, .calc-card label {
  font-size : 12px;
  font-weight : 700;
  color : #4b566b;
  display : block;
  margin-bottom : 14px
}
.apply-card input, .apply-card select, .application-form input, .application-form select, .application-form textarea {
  width : 100%;
  margin-top : 7px;
  padding : 12px 13px;
  border : 1px solid var(--border);
  border-radius : 7px;
  outline : 0;
  font : inherit;
  color : var(--text);
  background : #fff
}
  .apply-card input : focus, .apply-card select : focus, .application-form input : focus, .application-form select : focus, .application-form textarea : focus {
  border-color : var(--red);
  box-shadow : 0 0 0 3px #e21d2b12
}
.two-col, .form-row {
  display : grid;
  grid-template-columns : 1fr 1fr;
  gap : 14px
}
.full {
  width : 100%;
  margin-top : 3px
}
.form-note {
  font-size : 10px;
  color : #8993a5;
  margin : 10px 0 0!important
}
.stats {
  background : #fff;
  border-bottom : 1px solid var(--border);
  box-shadow : 0 4px 20px #071a3d0a
}
.stats-grid {
  display : grid;
  grid-template-columns : repeat(4, 1fr);
  padding : 22px 0
}
.stats-grid div {
  text-align : center;
  border-right : 1px solid var(--border)
}
  .stats-grid div : last-child {
  border : 0
}
.stats-grid b, .stats-grid span {
  display : block
}
.stats-grid b {
  font-size : 18px;
  color : var(--navy)
}
.stats-grid span {
  font-size : 11px;
  color : var(--muted)
}
.section {
  padding : 90px 0
}
.soft {
  background : var(--light)
}
.section-title {
  text-align : center;
  max-width : 700px;
  margin : 0 auto 48px
}
.section-title h2, .why-grid h2, .calc-grid h2, .faq-grid h2, .cta h2 {
  font-size : 38px;
  line-height : 1.15;
  letter-spacing : -1px;
  margin : 10px 0
}
.section-title p, .lead, .calc-grid p, .faq-grid p {
  color : var(--muted);
  margin : 0
}
.loan-grid {
  display : grid;
  grid-template-columns : repeat(4, 1fr);
  gap : 18px
}
.loan-card {
  position : relative;
  border : 1px solid var(--border);
  border-radius : 14px;
  padding : 28px;
  background : #fff;
  transition : .25s
}
  .loan-card : hover {
  transform : translateY(-6px);
  box-shadow : 0 18px 40px #071a3d12
}
.loan-card.featured {
  border-color : #e21d2b66;
  box-shadow : 0 12px 35px #e21d2b12
}
.popular {
  position : absolute;
  right : 15px;
  top : 15px;
  background : #fff0f1;
  color : var(--red);
  font-size : 9px;
  font-weight : 800;
  padding : 4px 7px;
  border-radius : 20px
}
.icon {
  width : 46px;
  height : 46px;
  border-radius : 12px;
  background : #edf3ff;
  color : var(--navy2);
  display : grid;
  place-items : center;
  font-size : 21px;
  font-weight : 800;
  margin-bottom : 22px
}
.loan-card h3 {
  margin : 0 0 8px;
  font-size : 18px
}
.loan-card p {
  font-size : 13px;
  color : var(--muted);
  min-height : 68px
}
.loan-card a {
  font-size : 13px;
  font-weight : 800;
  color : var(--red)
}
.steps {
  display : grid;
  grid-template-columns : repeat(4, 1fr);
  gap : 18px
}
.step {
  background : #fff;
  border : 1px solid var(--border);
  padding : 24px;
  border-radius : 12px;
  display : flex;
  gap : 15px
}
.step>span {
  font-size : 13px;
  font-weight : 800;
  color : var(--red)
}
.step h3 {
  margin : 0 0 5px;
  font-size : 16px
}
.step p {
  margin : 0;
  color : var(--muted);
  font-size : 12px
}
.why-grid {
  display : grid;
  grid-template-columns : 1.1fr .9fr;
  gap : 80px;
  align-items : center
}
.checks {
  margin-top : 28px
}
.checks>div {
  display : flex;
  gap : 13px;
  margin : 19px 0;
  color : var(--red);
  font-weight : 800
}
.checks span {
  display : flex;
  flex-direction : column;
  color : var(--text)
}
.checks small {
  font-weight : 400;
  color : var(--muted);
  margin-top : 3px
}
.why-box {
  background : var(--navy);
  color : #fff;
  border-radius : 18px;
  padding : 42px;
  box-shadow : 20px 20px 0 #e21d2b
}
.shield {
  width : 55px;
  height : 55px;
  background : var(--red);
  border-radius : 50%;
  display : grid;
  place-items : center;
  font-size : 25px;
  font-weight : 800
}
.why-box h3 {
  font-size : 24px;
  margin : 22px 0 8px
}
.why-box p {
  color : #bdc9dd;
  font-size : 14px
}
.mini-line {
  height : 1px;
  background : #ffffff22;
  margin : 28px 0 15px
}
.why-box small {
  color : #aab8d0
}
.calculator {
  background : var(--navy);
  color : #fff
}
.calc-grid {
  display : grid;
  grid-template-columns : 1fr 1fr;
  gap : 80px;
  align-items : center
}
.calculator .eyebrow {
  color : #ff6973
}
.calc-grid p {
  color : #b9c7dd
}
.calc-card {
  background : #fff;
  color : var(--text);
  border-radius : 16px;
  padding : 30px
}
.calc-card label {
  margin-bottom : 23px
}
.calc-card label strong {
  float : right;
  color : var(--navy)
}
input[type=range] {
  appearance : none;
  height : 4px;
  padding : 0!important;
  border : 0!important;
  background : #e7ebf2!important;
  margin-top : 13px!important;
  cursor : pointer
}
  input[type=range] : :-webkit-slider-thumb {
  appearance : none;
  width : 18px;
  height : 18px;
  border-radius : 50%;
  background : var(--red);
  border : 3px solid #fff;
  box-shadow : 0 0 0 1px var(--red)
}
.emi-result {
  background : #f7f8fb;
  border-radius : 10px;
  padding : 18px;
  display : flex;
  justify-content : space-between;
  align-items : center;
  margin-top : 8px
}
.emi-result span {
  font-size : 12px;
  color : var(--muted)
}
.emi-result strong {
  font-size : 24px;
  color : var(--red)
}
.application {
  background : #fff
}
.application-form {
  max-width : 850px;
  margin : auto;
  border : 1px solid var(--border);
  padding : 35px;
  border-radius : 16px;
  box-shadow : 0 15px 45px #071a3d0a
}
.application-form textarea {
  height : 110px;
  resize : vertical
}
.application-form .btn {
  margin-top : 5px
}
.faq {
  background : var(--light)
}
.faq-grid {
  display : grid;
  grid-template-columns : .75fr 1.25fr;
  gap : 80px
}
.faq-grid details {
  background : #fff;
  border : 1px solid var(--border);
  border-radius : 9px;
  margin-bottom : 10px;
  padding : 17px 20px
}
.faq-grid summary {
  cursor : pointer;
  font-weight : 700;
  font-size : 14px
}
.faq-grid details p {
  font-size : 13px;
  margin-top : 12px
}
.cta {
  background : #fff;
  padding : 70px 0
}
.cta-inner {
  background : linear-gradient(100deg, var(--navy), #0e316b);
  border-radius : 18px;
  padding : 42px 48px;
  color : #fff;
  display : flex;
  align-items : center;
  justify-content : space-between;
  gap : 30px
}
.cta h2 {
  margin : 8px 0 0;
  max-width : 700px
}
.cta .eyebrow {
  color : #ff6872
}
.footer {
  background : #06142f;
  color : #b8c4d8;
  padding : 55px 0 0
}
.footer-grid {
  display : grid;
  grid-template-columns : 1.5fr 1fr 1fr;
  gap : 60px;
  padding-bottom : 35px
}
.footer-logo {
  color : #fff
}
.footer-grid p {
  font-size : 12px;
  max-width : 370px
}
.footer h4 {
  color : #fff;
  margin : 0 0 15px
}
.footer-grid a {
  display : block;
  font-size : 12px;
  margin : 9px 0
}
.footer-bottom {
  border-top : 1px solid #ffffff15;
  padding : 18px 0;
  display : flex;
  justify-content : space-between;
  font-size : 10px
}
.toast {
  position : fixed;
  right : 25px;
  bottom : 25px;
  background : #11284e;
  color : #fff;
  padding : 15px 20px;
  border-radius : 9px;
  box-shadow : 0 15px 40px #0004;
  transform : translateY(100px);
  opacity : 0;
  transition : .3s;
  z-index : 100;
  font-size : 13px
}
.toast.show {
  transform : none;
  opacity : 1
}
  @media(max-width : 900px) {
  .nav-links{display : none
}
.menu-btn {
  display : block
}
.nav-btn {
  margin-left : auto
}
.hero-grid, .calc-grid, .why-grid, .faq-grid {
  grid-template-columns : 1fr;
  gap : 40px
}
.hero h1 {
  font-size : 42px
}
.hero-card-wrap {
  max-width : 520px;
  width : 100%;
  margin : auto
}
.loan-grid, .steps {
  grid-template-columns : 1fr 1fr
}
.stats-grid {
  grid-template-columns : 1fr 1fr;
  gap : 18px
}
  .stats-grid div : nth-child(2) {
  border : 0
}
.footer-grid {
  grid-template-columns : 1fr 1fr
}
  }@media(max-width : 600px) {
  .header, .nav{height : 68px
}
.hero-grid {
  padding : 55px 0
}
.hero h1 {
  font-size : 36px
}
.hero-actions {
  flex-direction : column;
  align-items : flex-start
}
.trust-row {
  gap : 18px
}
.trust-row strong {
  font-size : 17px
}
.apply-card {
  padding : 22px
}
.two-col, .form-row, .loan-grid, .steps, .footer-grid {
  grid-template-columns : 1fr
}
.section {
  padding : 65px 0
}
.section-title h2, .why-grid h2, .calc-grid h2, .faq-grid h2, .cta h2 {
  font-size : 30px
}
.stats-grid {
  grid-template-columns : 1fr 1fr
}
.stats-grid div {
  border : 0
}
.application-form {
  padding : 22px
}
.cta-inner {
  padding : 30px 25px;
  align-items : flex-start;
  flex-direction : column
}
.footer-bottom {
  flex-direction : column;
  gap : 8px
}
.nav-btn {
  display : none
}
}
/*whatsapp css*/


.whatsapp-btn {
    position: fixed !important;

    top: auto !important;
    left: auto !important;
    right: 20px !important;
    bottom: 20px !important;

    width: 60px !important;
    height: 60px !important;

    background: #25D366 !important;
    color: #ffffff !important;

    border-radius: 50% !important;

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

    font-size: 32px !important;
    line-height: 1 !important;

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

    z-index: 2147483647 !important;

    box-shadow: 0 5px 20px rgba(0,0,0,.25) !important;

    text-decoration: none !important;
}

.whatsapp-btn:hover {
    background: #20bd5a !important;
    color: #fff !important;
    transform: scale(1.08);
}


/* Mobile */
@media (max-width: 600px) {
    .whatsapp-btn {
        right: 15px !important;
        left: auto !important;
        bottom: 75px !important;

        width: 54px !important;
        height: 54px !important;

        font-size: 29px !important;
    }
}

/*resposive*/

/* =========================
   MOBILE NAVBAR FINAL
========================= */

@media (max-width: 900px) {

    .nav {
        position: relative;
    }

    .nav-links {
        display: none !important;
    }

    .nav-links.mobile-open {
        display: flex !important;

        position: absolute;

        top: 70px;
        left: 0;
        right: 0;

        width: 100%;

        background: #071a3d;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        padding: 15px 20px;

        margin: 0;

        z-index: 99999;

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

    .nav-links.mobile-open a {
        display: block;

        width: 100%;

        padding: 14px 5px;

        color: #fff;

        border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .nav-links.mobile-open a:last-child {
        border-bottom: none;
    }

    .menu-btn {
        display: flex !important;

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

        cursor: pointer;

        background: transparent;

        border: none;

        color: #fff;

        font-size: 28px;

        width: 45px;
        height: 45px;

        position: relative;

        z-index: 100000;
    }

}