/* Start custom CSS for html, class: .elementor-element-cc8a625 *//* =========================================================
   HDLS LOAN SERVICE HUB
   PREMIUM DESIGN + EMI CALCULATOR
========================================================= */

#hdls-loan-service-page {
  --hls-light: #E3F2FD;
  --hls-soft: #90CAF9;
  --hls-blue: #2196F3;
  --hls-dark: #0D47A1;
  --hls-navy: #062B60;
  --hls-text: #243B53;
  --hls-muted: #66788A;
  --hls-border: #D9EAF7;
  --hls-white: #FFFFFF;

  width: 100%;
  overflow: hidden;
  background: #ffffff;
  color: var(--hls-text);
  font-family: Inter, Arial, Helvetica, sans-serif;
}

#hdls-loan-service-page *,
#hdls-loan-service-page *::before,
#hdls-loan-service-page *::after {
  box-sizing: border-box;
}

#hdls-loan-service-page img {
  max-width: 100%;
  display: block;
}

#hdls-loan-service-page a {
  text-decoration: none;
}

#hdls-loan-service-page .hls-container {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

#hdls-loan-service-page .hls-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--hls-blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}

#hdls-loan-service-page .hls-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--hls-blue);
  border-radius: 20px;
}

#hdls-loan-service-page h1,
#hdls-loan-service-page h2,
#hdls-loan-service-page h3,
#hdls-loan-service-page p {
  margin-top: 0;
}


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

#hdls-loan-service-page .hls-hero {
  position: relative;
  padding: 105px 0 90px;
  background:
    radial-gradient(
      circle at 85% 25%,
      rgba(144, 202, 249, .35),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #E3F2FD 0%,
      #ffffff 58%,
      #F4FAFF 100%
    );
}

#hdls-loan-service-page .hls-hero-bg-shape {
  position: absolute;
  width: 500px;
  height: 500px;
  right: -180px;
  top: -160px;
  border-radius: 50%;
  border: 1px solid rgba(33,150,243,.14);
}

#hdls-loan-service-page .hls-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 60px;
}

#hdls-loan-service-page .hls-hero-content h1 {
  margin: 22px 0 22px;
  max-width: 720px;
  color: var(--hls-navy);
  font-size: clamp(44px, 5vw, 70px);
  line-height: 1.04;
  letter-spacing: -2.8px;
  font-weight: 800;
}

#hdls-loan-service-page .hls-hero-content h1 span,
#hdls-loan-service-page h2 span {
  display: block;
  color: var(--hls-blue);
}

#hdls-loan-service-page .hls-hero-content > p {
  max-width: 650px;
  color: var(--hls-muted);
  font-size: 17px;
  line-height: 1.85;
}

#hdls-loan-service-page .hls-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

#hdls-loan-service-page .hls-btn {
  min-height: 54px;
  padding: 0 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  transition: .3s ease;
}

#hdls-loan-service-page .hls-btn-primary {
  color: #fff;
  background: var(--hls-dark);
  box-shadow: 0 12px 30px rgba(13,71,161,.18);
}

#hdls-loan-service-page .hls-btn-primary:hover {
  transform: translateY(-3px);
  background: var(--hls-blue);
}

#hdls-loan-service-page .hls-btn-outline {
  color: var(--hls-dark);
  border: 1px solid rgba(13,71,161,.2);
  background: rgba(255,255,255,.7);
}

#hdls-loan-service-page .hls-btn-outline:hover {
  transform: translateY(-3px);
  border-color: var(--hls-blue);
  background: #fff;
}

#hdls-loan-service-page .hls-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 35px;
  margin-top: 48px;
}

#hdls-loan-service-page .hls-trust-row div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#hdls-loan-service-page .hls-trust-row strong {
  color: var(--hls-navy);
  font-size: 25px;
}

#hdls-loan-service-page .hls-trust-row span {
  color: var(--hls-muted);
  font-size: 12px;
}


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

#hdls-loan-service-page .hls-hero-visual {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#hdls-loan-service-page .hls-hero-circle {
  position: relative;
  z-index: 3;
  width: 330px;
  height: 330px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffffff, #E3F2FD);
  border: 12px solid rgba(144,202,249,.35);
  box-shadow:
    0 35px 80px rgba(13,71,161,.16),
    inset 0 0 0 1px rgba(33,150,243,.12);
  animation: hlsFloat 5s ease-in-out infinite;
}

#hdls-loan-service-page .hls-circle-inner {
  width: 225px;
  height: 225px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
  background: var(--hls-dark);
  color: #fff;
  box-shadow: 0 20px 50px rgba(6,43,96,.25);
}

#hdls-loan-service-page .hls-circle-small {
  font-size: 10px;
  letter-spacing: 2px;
  opacity: .75;
}

#hdls-loan-service-page .hls-circle-inner strong {
  margin: 10px 0;
  font-size: 34px;
}

#hdls-loan-service-page .hls-orbit {
  position: absolute;
  border: 1px solid rgba(33,150,243,.18);
  border-radius: 50%;
}

#hdls-loan-service-page .hls-orbit-one {
  width: 430px;
  height: 430px;
  animation: hlsRotate 20s linear infinite;
}

#hdls-loan-service-page .hls-orbit-two {
  width: 520px;
  height: 520px;
  animation: hlsRotateReverse 28s linear infinite;
}

#hdls-loan-service-page .hls-floating-card {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  border: 1px solid rgba(33,150,243,.12);
  border-radius: 15px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 18px 45px rgba(13,71,161,.14);
}

#hdls-loan-service-page .hls-floating-card strong {
  display: block;
  color: var(--hls-navy);
  font-size: 13px;
}

#hdls-loan-service-page .hls-floating-card small {
  display: block;
  margin-top: 3px;
  color: var(--hls-muted);
  font-size: 10px;
}

#hdls-loan-service-page .hls-floating-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--hls-light);
  color: var(--hls-blue);
  font-size: 20px;
  font-weight: 800;
}

#hdls-loan-service-page .hls-float-one {
  top: 75px;
  left: 5px;
  animation: hlsFloat 4.5s ease-in-out infinite;
}

#hdls-loan-service-page .hls-float-two {
  right: 0;
  bottom: 70px;
  animation: hlsFloat 5.5s ease-in-out infinite reverse;
}


/* =========================================================
   INTRO
========================================================= */

#hdls-loan-service-page .hls-intro {
  padding: 110px 0 115px;
  background: #fff;
}

#hdls-loan-service-page .hls-section-heading {
  max-width: 760px;
  margin: 0 auto 60px;
  text-align: center;
}

#hdls-loan-service-page .hls-section-heading h2 {
  margin: 18px 0;
  color: var(--hls-navy);
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.12;
  letter-spacing: -1.8px;
}

#hdls-loan-service-page .hls-section-heading p {
  margin: 0 auto;
  max-width: 650px;
  color: var(--hls-muted);
  line-height: 1.8;
}


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

#hdls-loan-service-page .hls-loan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

#hdls-loan-service-page .hls-loan-card {
  position: relative;
  min-height: 330px;
  padding: 34px 30px;
  overflow: hidden;
  border: 1px solid var(--hls-border);
  border-radius: 22px;
  background: #fff;
  transition: .35s ease;
}

#hdls-loan-service-page .hls-loan-card::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -65px;
  bottom: -65px;
  border-radius: 50%;
  background: var(--hls-light);
  transition: .4s ease;
}

#hdls-loan-service-page .hls-loan-card:hover {
  transform: translateY(-8px);
  border-color: rgba(33,150,243,.35);
  box-shadow: 0 25px 60px rgba(13,71,161,.12);
}

#hdls-loan-service-page .hls-loan-card:hover::after {
  transform: scale(1.5);
}

#hdls-loan-service-page .hls-card-number {
  position: absolute;
  right: 25px;
  top: 25px;
  color: rgba(13,71,161,.08);
  font-size: 40px;
  line-height: 1;
  font-weight: 900;
}

#hdls-loan-service-page .hls-icon-wrap {
  position: relative;
  z-index: 2;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  margin-bottom: 28px;
  border-radius: 20px;
  background: var(--hls-light);
  transition: .35s ease;
}

#hdls-loan-service-page .hls-icon-wrap img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

#hdls-loan-service-page .hls-loan-card:hover .hls-icon-wrap {
  transform: rotate(-5deg) scale(1.08);
  background: var(--hls-soft);
}

#hdls-loan-service-page .hls-card-content {
  position: relative;
  z-index: 3;
}

#hdls-loan-service-page .hls-card-content h3 {
  margin-bottom: 12px;
  color: var(--hls-navy);
  font-size: 20px;
}

#hdls-loan-service-page .hls-card-content p {
  min-height: 82px;
  color: var(--hls-muted);
  font-size: 14px;
  line-height: 1.75;
}

#hdls-loan-service-page .hls-card-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--hls-blue);
  font-size: 13px;
  font-weight: 800;
}

#hdls-loan-service-page .hls-card-link b {
  transition: .25s ease;
}

#hdls-loan-service-page .hls-loan-card:hover .hls-card-link b {
  transform: translateX(5px);
}


/* =========================================================
   PREMIUM EMI CALCULATOR
========================================================= */

#hdls-loan-service-page .hls-calculator-section {
  position: relative;
  padding: 120px 0;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(144,202,249,.16),
      transparent 25%
    ),
    linear-gradient(
      145deg,
      #F5FAFF 0%,
      #E3F2FD 100%
    );
}

#hdls-loan-service-page .hls-calculator-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  border: 1px solid rgba(33,150,243,.12);
}

#hdls-loan-service-page .hls-calc-glow-one {
  width: 500px;
  height: 500px;
  left: -280px;
  top: 80px;
}

#hdls-loan-service-page .hls-calc-glow-two {
  width: 400px;
  height: 400px;
  right: -220px;
  bottom: 20px;
}

#hdls-loan-service-page .hls-calc-heading {
  position: relative;
  z-index: 2;
  max-width: 750px;
  margin: 0 auto 55px;
  text-align: center;
}

#hdls-loan-service-page .hls-calc-heading h2 {
  margin: 17px 0;
  color: var(--hls-navy);
  font-size: clamp(35px, 4vw, 54px);
  line-height: 1.1;
  letter-spacing: -1.8px;
}

#hdls-loan-service-page .hls-calc-heading p {
  max-width: 680px;
  margin: 0 auto;
  color: var(--hls-muted);
  line-height: 1.8;
}


/* =========================================================
   CALCULATOR
========================================================= */

#hdls-loan-service-page .hls-calculator {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr .88fr;
  border: 1px solid rgba(33,150,243,.15);
  border-radius: 28px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 30px 90px rgba(13,71,161,.15);
}


/* =========================================================
   INPUT PANEL
========================================================= */

#hdls-loan-service-page .hls-calc-input-panel {
  padding: 45px;
  background: #fff;
}

#hdls-loan-service-page .hls-calc-panel-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 38px;
}

#hdls-loan-service-page .hls-calc-panel-top span {
  color: var(--hls-blue);
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 800;
}

#hdls-loan-service-page .hls-calc-panel-top h3 {
  margin: 7px 0 0;
  color: var(--hls-navy);
  font-size: 28px;
}

#hdls-loan-service-page .hls-calc-badge {
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  background: var(--hls-dark);
  font-size: 12px;
  font-weight: 900;
}


/* =========================================================
   FIELDS
========================================================= */

#hdls-loan-service-page .hls-calc-field {
  margin-bottom: 31px;
}

#hdls-loan-service-page .hls-field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 15px;
}

#hdls-loan-service-page .hls-field-label label {
  color: var(--hls-navy);
  font-size: 14px;
  font-weight: 800;
}

#hdls-loan-service-page .hls-input-box {
  min-width: 145px;
  height: 47px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 13px;
  border: 1px solid var(--hls-border);
  border-radius: 10px;
  background: #F8FBFE;
  color: var(--hls-dark);
  font-weight: 800;
  transition: .2s ease;
}

#hdls-loan-service-page .hls-input-box:focus-within {
  border-color: var(--hls-blue);
  box-shadow: 0 0 0 3px rgba(33,150,243,.08);
  background: #fff;
}

#hdls-loan-service-page .hls-input-box input {
  width: 100px;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--hls-dark);
  font-size: 14px;
  font-weight: 800;
  text-align: right;
}

#hdls-loan-service-page .hls-input-box input::-webkit-inner-spin-button,
#hdls-loan-service-page .hls-input-box input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#hdls-loan-service-page .hls-input-box input[type="number"] {
  -moz-appearance: textfield;
}


#hdls-loan-service-page .hls-calc-field input[type="range"] {
  width: 100%;
  height: 5px;
  appearance: none;
  border-radius: 10px;
  outline: none;

  background:
    linear-gradient(
      to right,
      var(--hls-blue) 0%,
      var(--hls-blue) 0%,
      #DDEBF7 0%,
      #DDEBF7 100%
    );
}

#hdls-loan-service-page .hls-calc-field input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: var(--hls-blue);
  box-shadow: 0 3px 12px rgba(33,150,243,.3);
  cursor: pointer;
}

#hdls-loan-service-page .hls-calc-field input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: var(--hls-blue);
  box-shadow: 0 3px 12px rgba(33,150,243,.3);
  cursor: pointer;
}

#hdls-loan-service-page .hls-range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  color: #8A9BAD;
  font-size: 10px;
}


/* =========================================================
   NOTE
========================================================= */

#hdls-loan-service-page .hls-calc-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 36px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--hls-light);
}

#hdls-loan-service-page .hls-note-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--hls-blue);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

#hdls-loan-service-page .hls-calc-note p {
  margin: 0;
  color: var(--hls-muted);
  font-size: 11px;
  line-height: 1.65;
}


/* =========================================================
   RESULT PANEL
========================================================= */

#hdls-loan-service-page .hls-calc-result-panel {
  position: relative;
  padding: 48px;
  color: #fff;
  background:
    radial-gradient(
      circle at 90% 5%,
      rgba(144,202,249,.25),
      transparent 25%
    ),
    linear-gradient(
      150deg,
      #0D47A1,
      #062B60
    );
}

#hdls-loan-service-page .hls-result-top > span {
  color: rgba(255,255,255,.65);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
}

#hdls-loan-service-page .hls-emi-value {
  margin-top: 13px;
  color: #fff;
  font-size: clamp(35px, 4vw, 51px);
  line-height: 1.1;
  font-weight: 850;
  letter-spacing: -1.8px;
  overflow-wrap: anywhere;
}

#hdls-loan-service-page .hls-result-top p {
  margin: 8px 0 0;
  color: rgba(255,255,255,.62);
  font-size: 12px;
}

#hdls-loan-service-page .hls-result-divider {
  height: 1px;
  margin: 31px 0;
  background: rgba(255,255,255,.14);
}

#hdls-loan-service-page .hls-result-stats {
  display: grid;
  gap: 17px;
}

#hdls-loan-service-page .hls-result-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

#hdls-loan-service-page .hls-result-stat span {
  color: rgba(255,255,255,.65);
  font-size: 12px;
}

#hdls-loan-service-page .hls-result-stat strong {
  color: #fff;
  font-size: 15px;
  text-align: right;
}


/* =========================================================
   BREAKDOWN
========================================================= */

#hdls-loan-service-page .hls-breakdown {
  margin-top: 30px;
}

#hdls-loan-service-page .hls-breakdown-head {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 10px;
  color: rgba(255,255,255,.7);
  font-size: 10px;
}

#hdls-loan-service-page .hls-breakdown-bar {
  display: flex;
  width: 100%;
  height: 9px;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(255,255,255,.12);
}

#hdls-loan-service-page .hls-breakdown-bar span {
  display: block;
  height: 100%;
  transition: width .4s ease;
}

#hdls-loan-service-page #hlsPrincipalBar {
  width: 0%;
  background: #90CAF9;
}

#hdls-loan-service-page #hlsInterestBar {
  width: 0%;
  background: #fff;
}

#hdls-loan-service-page .hls-breakdown-legend {
  display: flex;
  gap: 22px;
  margin-top: 13px;
}

#hdls-loan-service-page .hls-breakdown-legend div {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,.65);
  font-size: 10px;
}

#hdls-loan-service-page .hls-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

#hdls-loan-service-page .hls-dot-principal {
  background: #90CAF9;
}

#hdls-loan-service-page .hls-dot-interest {
  background: #fff;
}


/* =========================================================
   CALCULATOR CTA
========================================================= */

#hdls-loan-service-page .hls-calc-cta {
  min-height: 52px;
  margin-top: 34px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border-radius: 11px;
  color: var(--hls-dark);
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  transition: .3s ease;
}

#hdls-loan-service-page .hls-calc-cta:hover {
  transform: translateY(-2px);
  background: var(--hls-light);
}

#hdls-loan-service-page .hls-calc-call {
  display: block;
  margin-top: 13px;
  color: rgba(255,255,255,.65);
  font-size: 11px;
  text-align: center;
  transition: .25s ease;
}

#hdls-loan-service-page .hls-calc-call:hover {
  color: #fff;
}


/* =========================================================
   WHY HDLS
========================================================= */

#hdls-loan-service-page .hls-why {
  padding: 120px 0;
  background: #fff;
}

#hdls-loan-service-page .hls-why-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: 80px;
}

#hdls-loan-service-page .hls-why-image {
  position: relative;
}

#hdls-loan-service-page .hls-why-image img {
  width: 100%;
  height: 530px;
  object-fit: cover;
  border-radius: 26px;
}

#hdls-loan-service-page .hls-image-badge {
  position: absolute;
  right: -25px;
  bottom: 35px;
  width: 170px;
  padding: 22px;
  border-radius: 18px;
  background: var(--hls-dark);
  color: #fff;
  box-shadow: 0 20px 50px rgba(13,71,161,.22);
}

#hdls-loan-service-page .hls-image-badge strong {
  display: block;
  font-size: 30px;
}

#hdls-loan-service-page .hls-image-badge span {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,.7);
  font-size: 11px;
}

#hdls-loan-service-page .hls-why-content h2 {
  margin: 18px 0 22px;
  color: var(--hls-navy);
  font-size: clamp(34px, 4vw, 50px);
  line-height: 1.1;
  letter-spacing: -1.8px;
}

#hdls-loan-service-page .hls-why-content > p {
  color: var(--hls-muted);
  line-height: 1.85;
}

#hdls-loan-service-page .hls-benefit-list {
  margin-top: 35px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

#hdls-loan-service-page .hls-benefit {
  display: flex;
  gap: 14px;
}

#hdls-loan-service-page .hls-benefit > span {
  flex: 0 0 auto;
  color: var(--hls-blue);
  font-size: 11px;
  font-weight: 900;
}

#hdls-loan-service-page .hls-benefit h3 {
  margin-bottom: 5px;
  color: var(--hls-navy);
  font-size: 14px;
}

#hdls-loan-service-page .hls-benefit p {
  margin: 0;
  color: var(--hls-muted);
  font-size: 12px;
  line-height: 1.65;
}


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

#hdls-loan-service-page .hls-process {
  padding: 115px 0;
  background: #F7FBFF;
}

#hdls-loan-service-page .hls-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

#hdls-loan-service-page .hls-process-card {
  position: relative;
  padding: 35px 25px;
  border: 1px solid var(--hls-border);
  border-radius: 20px;
  background: #fff;
  transition: .3s ease;
}

#hdls-loan-service-page .hls-process-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(13,71,161,.09);
}

#hdls-loan-service-page .hls-process-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  border-radius: 17px;
  background: var(--hls-light);
}

#hdls-loan-service-page .hls-process-icon img {
  width: 36px;
  height: 36px;
}

#hdls-loan-service-page .hls-process-check {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--hls-blue);
  font-weight: 900;
}

#hdls-loan-service-page .hls-process-card > span {
  color: var(--hls-blue);
  font-size: 11px;
  font-weight: 900;
}

#hdls-loan-service-page .hls-process-card h3 {
  margin: 7px 0 10px;
  color: var(--hls-navy);
  font-size: 17px;
}

#hdls-loan-service-page .hls-process-card p {
  margin: 0;
  color: var(--hls-muted);
  font-size: 12px;
  line-height: 1.7;
}


/* =========================================================
   FINAL CTA
========================================================= */

#hdls-loan-service-page .hls-final-cta {
  padding: 110px 0 70px;
  background: #fff;
}

#hdls-loan-service-page .hls-final-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 45px;
  padding: 65px;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(
      circle at 90% 20%,
      rgba(144,202,249,.25),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #062B60,
      #0D47A1
    );
}

#hdls-loan-service-page .hls-final-content {
  max-width: 650px;
}

#hdls-loan-service-page .hls-final-content .hls-eyebrow {
  color: #90CAF9;
}

#hdls-loan-service-page .hls-final-content .hls-eyebrow::before {
  background: #90CAF9;
}

#hdls-loan-service-page .hls-final-content h2 {
  margin: 18px 0;
  color: #fff;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
}

#hdls-loan-service-page .hls-final-content h2 span {
  color: #90CAF9;
}

#hdls-loan-service-page .hls-final-content p {
  margin: 0;
  color: rgba(255,255,255,.68);
  line-height: 1.8;
}

#hdls-loan-service-page .hls-final-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 230px;
}

#hdls-loan-service-page .hls-btn-light {
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
}

#hdls-loan-service-page .hls-btn-light:hover {
  background: rgba(255,255,255,.15);
}

#hdls-loan-service-page .hls-disclaimer {
  max-width: 1050px;
  margin: 35px auto 0;
  color: #7B8B9A;
  font-size: 10px;
  line-height: 1.75;
  text-align: center;
}

#hdls-loan-service-page .hls-disclaimer strong {
  color: var(--hls-text);
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes hlsFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }

}

@keyframes hlsRotate {

  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }

}

@keyframes hlsRotateReverse {

  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

  #hdls-loan-service-page .hls-hero-grid {
    grid-template-columns: 1fr;
  }

  #hdls-loan-service-page .hls-hero-content {
    text-align: center;
  }

  #hdls-loan-service-page .hls-hero-content > p {
    margin-left: auto;
    margin-right: auto;
  }

  #hdls-loan-service-page .hls-hero-buttons,
  #hdls-loan-service-page .hls-trust-row {
    justify-content: center;
  }

  #hdls-loan-service-page .hls-hero-visual {
    min-height: 450px;
  }

  #hdls-loan-service-page .hls-loan-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  #hdls-loan-service-page .hls-calculator {
    grid-template-columns: 1fr;
  }

  #hdls-loan-service-page .hls-why-grid {
    grid-template-columns: 1fr;
    gap: 55px;
  }

  #hdls-loan-service-page .hls-why-image {
    max-width: 650px;
    margin: auto;
  }

  #hdls-loan-service-page .hls-process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  #hdls-loan-service-page .hls-final-box {
    flex-direction: column;
    align-items: flex-start;
  }

  #hdls-loan-service-page .hls-final-buttons {
    flex-direction: row;
  }

}


@media (max-width: 750px) {

  #hdls-loan-service-page .hls-container {
    width: min(100% - 30px, 600px);
  }

  #hdls-loan-service-page .hls-hero {
    padding: 75px 0 65px;
  }

  #hdls-loan-service-page .hls-hero-content h1 {
    font-size: 42px;
    letter-spacing: -1.8px;
  }

  #hdls-loan-service-page .hls-hero-visual {
    min-height: 390px;
  }

  #hdls-loan-service-page .hls-hero-circle {
    width: 270px;
    height: 270px;
  }

  #hdls-loan-service-page .hls-circle-inner {
    width: 185px;
    height: 185px;
  }

  #hdls-loan-service-page .hls-circle-inner strong {
    font-size: 27px;
  }

  #hdls-loan-service-page .hls-orbit-one {
    width: 340px;
    height: 340px;
  }

  #hdls-loan-service-page .hls-orbit-two {
    width: 400px;
    height: 400px;
  }

  #hdls-loan-service-page .hls-floating-card {
    transform: scale(.88);
  }

  #hdls-loan-service-page .hls-float-one {
    left: -5px;
    top: 35px;
  }

  #hdls-loan-service-page .hls-float-two {
    right: -5px;
    bottom: 25px;
  }

  #hdls-loan-service-page .hls-intro,
  #hdls-loan-service-page .hls-calculator-section,
  #hdls-loan-service-page .hls-why,
  #hdls-loan-service-page .hls-process {
    padding: 80px 0;
  }

  #hdls-loan-service-page .hls-loan-grid {
    grid-template-columns: 1fr;
  }

  #hdls-loan-service-page .hls-loan-card {
    min-height: auto;
  }

  #hdls-loan-service-page .hls-card-content p {
    min-height: auto;
  }

  #hdls-loan-service-page .hls-calc-input-panel,
  #hdls-loan-service-page .hls-calc-result-panel {
    padding: 30px 24px;
  }

  #hdls-loan-service-page .hls-field-label {
    align-items: flex-start;
    flex-direction: column;
  }

  #hdls-loan-service-page .hls-input-box {
    width: 100%;
  }

  #hdls-loan-service-page .hls-input-box input {
    width: 100%;
  }

  #hdls-loan-service-page .hls-benefit-list {
    grid-template-columns: 1fr;
  }

  #hdls-loan-service-page .hls-why-image img {
    height: 420px;
  }

  #hdls-loan-service-page .hls-process-grid {
    grid-template-columns: 1fr;
  }

  #hdls-loan-service-page .hls-final-box {
    padding: 40px 25px;
  }

  #hdls-loan-service-page .hls-final-buttons {
    width: 100%;
    flex-direction: column;
  }

}


@media (max-width: 500px) {

  #hdls-loan-service-page .hls-container {
    width: calc(100% - 24px);
  }

  #hdls-loan-service-page .hls-hero-content h1 {
    font-size: 35px;
  }

  #hdls-loan-service-page .hls-hero-content > p {
    font-size: 14px;
  }

  #hdls-loan-service-page .hls-trust-row {
    gap: 18px;
  }

  #hdls-loan-service-page .hls-trust-row strong {
    font-size: 21px;
  }

  #hdls-loan-service-page .hls-hero-visual {
    min-height: 350px;
  }

  #hdls-loan-service-page .hls-hero-circle {
    width: 230px;
    height: 230px;
    border-width: 8px;
  }

  #hdls-loan-service-page .hls-circle-inner {
    width: 160px;
    height: 160px;
  }

  #hdls-loan-service-page .hls-circle-inner strong {
    font-size: 23px;
  }

  #hdls-loan-service-page .hls-orbit-one {
    width: 285px;
    height: 285px;
  }

  #hdls-loan-service-page .hls-orbit-two {
    width: 330px;
    height: 330px;
  }

  #hdls-loan-service-page .hls-floating-card {
    padding: 10px 12px;
    transform: scale(.76);
  }

  #hdls-loan-service-page .hls-float-one {
    left: -15px;
    top: 30px;
  }

  #hdls-loan-service-page .hls-float-two {
    right: -15px;
    bottom: 25px;
  }

  #hdls-loan-service-page .hls-section-heading h2,
  #hdls-loan-service-page .hls-calc-heading h2 {
    font-size: 32px;
  }

  #hdls-loan-service-page .hls-loan-card {
    padding: 28px 23px;
  }

  #hdls-loan-service-page .hls-calc-panel-top h3 {
    font-size: 23px;
  }

  #hdls-loan-service-page .hls-emi-value {
    font-size: 34px;
  }

  #hdls-loan-service-page .hls-result-stat {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  #hdls-loan-service-page .hls-result-stat strong {
    text-align: left;
  }

  #hdls-loan-service-page .hls-breakdown-head {
    flex-direction: column;
  }

  #hdls-loan-service-page .hls-why-image img {
    height: 330px;
  }

  #hdls-loan-service-page .hls-image-badge {
    right: 15px;
    bottom: 20px;
  }

}/* End custom CSS */