/* =========================================================
   DFMAX FINANCE WEBSITE
   Main Stylesheet
========================================================= */

/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {
  /* Brand Colors */
  --dfmax-primary: #009cc5;
  --dfmax-primary-dark: #006b87;
  --dfmax-accent: #f47b3a;

  /* Text */
  --dfmax-text: #292929;
  --dfmax-text-light: #667085;

  /* Backgrounds */
  --dfmax-white: #ffffff;
  --dfmax-light-blue: #f0fafd;
  --dfmax-light-gray: #f7f8fa;

  /* Border */
  --dfmax-border: #e5e7eb;

  /* Status */
  --dfmax-success: #16a34a;
  --dfmax-warning: #f59e0b;
  --dfmax-danger: #dc2626;

  /* Footer */
  --dfmax-footer: #063b4a;

  /* Common */
  --dfmax-radius: 10px;
  --dfmax-transition: all 0.3s ease;
}

/* =========================================================
   GLOBAL
========================================================= */

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;

  color: var(--dfmax-text);

  background: var(--dfmax-white);

  line-height: 1.6;

  overflow-x: hidden;
}

a {
  text-decoration: none;

  transition: var(--dfmax-transition);
}

ul {
  padding: 0;

  margin: 0;

  list-style: none;
}

img {
  max-width: 100%;

  height: auto;
}

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

.dfmax-header {
  background: var(--dfmax-white);

  border-bottom: 1px solid var(--dfmax-border);

  position: sticky;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 9999;
}

/* =========================================================
   NAVBAR
========================================================= */

.dfmax-header .navbar {
  min-height: 82px;

  padding: 8px 0;
}

/*
|--------------------------------------------------------------------------
| Desktop Container
|--------------------------------------------------------------------------
| More usable width than Bootstrap's default container.
*/

.dfmax-header .container {
  width: 100%;

  max-width: 1500px;
}

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

.dfmax-logo {
  display: flex;

  align-items: center;

  flex-shrink: 0;

  margin-right: 5px;
}

.dfmax-logo img {
  width: 160px;

  height: auto;

  display: block;
}

/* =========================================================
   MAIN NAVIGATION
========================================================= */

.dfmax-main-nav {
  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: nowrap;

  gap: 3px;

  margin-left: 25px;

  margin-right: 25px;
}

/* Individual nav item */

.dfmax-main-nav .nav-item {
  flex-shrink: 0;
}

/* Navigation links */

.dfmax-main-nav .nav-link {
  color: var(--dfmax-text);

  font-size: 14.5px;

  font-weight: 600;

  padding: 10px 11px !important;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  white-space: nowrap;

  line-height: 1.4;
}

/* Hover + Active */

.dfmax-main-nav .nav-link:hover,
.dfmax-main-nav .nav-link.active {
  color: var(--dfmax-primary);
}

/* =========================================================
   NAVBAR DROPDOWN
========================================================= */

.dfmax-dropdown {
  min-width: 245px;

  padding: 10px;

  margin-top: 10px !important;

  background: var(--dfmax-white);

  border: 1px solid var(--dfmax-border);

  border-radius: 12px;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

/* Dropdown items */

.dfmax-dropdown .dropdown-item {
  padding: 10px 12px;

  border-radius: 7px;

  font-size: 14px;

  font-weight: 500;

  color: var(--dfmax-text);

  white-space: nowrap;

  display: flex;

  align-items: center;

  gap: 5px;
}

/* Dropdown icons */

.dfmax-dropdown .dropdown-item i {
  width: 22px;

  color: var(--dfmax-primary);
}

/* Dropdown hover */

.dfmax-dropdown .dropdown-item:hover {
  background: var(--dfmax-light-blue);

  color: var(--dfmax-primary);
}

/* View all */

.dfmax-dropdown .dfmax-view-all {
  color: var(--dfmax-accent);

  font-weight: 600;
}

.dfmax-dropdown .dfmax-view-all i {
  color: var(--dfmax-accent);
}

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

.dfmax-header-actions {
  display: flex;

  align-items: center;

  gap: 4px;

  flex-shrink: 0;

  margin-left: 15px;
}

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

.dfmax-login-btn {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  color: var(--dfmax-primary-dark);

  font-size: 14px;

  font-weight: 600;

  padding: 10px 8px;

  white-space: nowrap;
}

.dfmax-login-btn:hover {
  color: var(--dfmax-accent);
}

/* =========================================================
   APPLY NOW BUTTON
========================================================= */

.dfmax-apply-btn {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  background: var(--dfmax-accent);

  border: 1px solid var(--dfmax-accent);

  color: var(--dfmax-white);

  padding: 11px 16px;

  min-width: 125px;

  min-height: 48px;

  border-radius: 8px;

  font-size: 14px;

  font-weight: 600;

  white-space: nowrap;
}

.dfmax-apply-btn:hover {
  background: #d95f22;

  border-color: #d95f22;

  color: var(--dfmax-white);

  transform: translateY(-1px);
}

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

.dfmax-toggler {
  border: 1px solid var(--dfmax-border);

  padding: 7px 10px;
}

.dfmax-toggler:focus {
  box-shadow: 0 0 0 3px rgba(0, 156, 197, 0.12);
}

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

.dfmax-footer {
  background: var(--dfmax-footer);

  color: var(--dfmax-white);
}

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

.dfmax-footer-main {
  padding: 70px 0 55px;
}

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

.dfmax-footer-logo {
  display: inline-block;
}

.dfmax-footer-logo img {
  width: 170px;

  background: var(--dfmax-white);

  padding: 7px 12px;

  border-radius: 7px;

  margin-bottom: 22px;
}

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

.dfmax-footer-description {
  color: rgba(255, 255, 255, 0.72);

  font-size: 14px;

  line-height: 1.8;

  max-width: 380px;

  margin-bottom: 25px;
}

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

.dfmax-footer-widget h5 {
  color: var(--dfmax-white);

  font-size: 16px;

  font-weight: 700;

  margin-bottom: 22px;
}

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

.dfmax-footer-links li {
  margin-bottom: 11px;
}

.dfmax-footer-links a {
  color: rgba(255, 255, 255, 0.68);

  font-size: 14px;
}

.dfmax-footer-links a:hover {
  color: var(--dfmax-accent);

  padding-left: 4px;
}

/* =========================================================
   SOCIAL LINKS
========================================================= */

.dfmax-social-links {
  display: flex;

  align-items: center;

  gap: 9px;
}

.dfmax-social-links a {
  width: 38px;

  height: 38px;

  display: flex;

  align-items: center;

  justify-content: center;

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

  border-radius: 50%;

  color: var(--dfmax-white);
}

.dfmax-social-links a:hover {
  background: var(--dfmax-accent);

  border-color: var(--dfmax-accent);

  color: var(--dfmax-white);

  transform: translateY(-3px);
}

/* =========================================================
   CONTACT INFORMATION
========================================================= */

.dfmax-contact-info li {
  display: flex;

  gap: 12px;

  margin-bottom: 18px;
}

.dfmax-contact-info > li > i {
  color: var(--dfmax-accent);

  font-size: 15px;

  margin-top: 4px;
}

.dfmax-contact-info span {
  display: block;

  color: rgba(255, 255, 255, 0.5);

  font-size: 12px;

  margin-bottom: 2px;
}

.dfmax-contact-info a,
.dfmax-contact-info p {
  color: rgba(255, 255, 255, 0.8);

  font-size: 13px;

  margin: 0;
}

.dfmax-contact-info a:hover {
  color: var(--dfmax-accent);
}

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

.dfmax-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);

  padding: 20px 0;
}

.dfmax-footer-bottom p {
  color: rgba(255, 255, 255, 0.55);

  font-size: 13px;
}

.dfmax-footer-bottom strong {
  color: var(--dfmax-white);
}

/* =========================================================
   LEGAL LINKS
========================================================= */

.dfmax-legal-links {
  display: flex;

  justify-content: flex-end;

  align-items: center;

  flex-wrap: wrap;

  gap: 18px;
}

.dfmax-legal-links a {
  color: rgba(255, 255, 255, 0.55);

  font-size: 12px;
}

.dfmax-legal-links a:hover {
  color: var(--dfmax-accent);
}

/* =========================================================
   LARGE DESKTOP
   1400px+
========================================================= */

@media (min-width: 1400px) {
  .dfmax-header .container {
    max-width: 1500px;
  }

  .dfmax-logo img {
    width: 170px;
  }

  .dfmax-main-nav .nav-link {
    padding-left: 10px !important;

    padding-right: 10px !important;
  }
}

/* =========================================================
   STANDARD DESKTOP
   1200px - 1399px
========================================================= */

@media (min-width: 1200px) and (max-width: 1399px) {
  .dfmax-header .container {
    max-width: 1350px;
  }

  .dfmax-logo {
    margin-right: 0;
  }

  .dfmax-logo img {
    width: 150px;
  }

  .dfmax-main-nav {
    margin-left: 12px;

    margin-right: 12px;

    gap: 0;
  }

  .dfmax-main-nav .nav-link {
    font-size: 13.5px;

    padding-left: 7px !important;

    padding-right: 7px !important;
  }

  .dfmax-login-btn {
    font-size: 13.5px;

    padding-left: 6px;

    padding-right: 6px;
  }

  .dfmax-header-actions {
    gap: 5px;

    margin-left: 5px;
  }

  .dfmax-apply-btn {
    min-width: 115px;

    padding-left: 13px;

    padding-right: 13px;
  }
}

/* =========================================================
   TABLET
   Below 1200px
========================================================= */

@media (max-width: 1199px) {
  /*
    |--------------------------------------------------------------------------
    | Let Bootstrap collapse the menu
    |--------------------------------------------------------------------------
    */

  .dfmax-header .navbar-collapse {
    padding: 20px 0;
  }

  .dfmax-header .container {
    max-width: 100%;

    padding-left: 20px;

    padding-right: 20px;
  }

  .dfmax-main-nav {
    display: block;

    margin: 0;
  }

  .dfmax-main-nav .nav-item {
    width: 100%;
  }

  .dfmax-main-nav .nav-link {
    justify-content: flex-start;

    padding: 10px 0 !important;

    font-size: 14px;
  }

  .dfmax-header-actions {
    margin-top: 15px;

    margin-left: 0;

    padding-top: 15px;

    border-top: 1px solid var(--dfmax-border);

    justify-content: flex-start;
  }

  .dfmax-dropdown {
    min-width: auto;

    box-shadow: none;

    border: 0;

    padding: 5px 0 5px 15px;

    margin-top: 0 !important;
  }

  .dfmax-dropdown .dropdown-item {
    padding: 9px 10px;
  }
}

/* =========================================================
   MOBILE
   Below 768px
========================================================= */

@media (max-width: 767px) {
  .dfmax-header .navbar {
    min-height: 70px;
  }

  .dfmax-logo img {
    width: 145px;
  }

  .dfmax-header-actions {
    flex-direction: column;

    align-items: stretch;

    gap: 8px;
  }

  .dfmax-login-btn {
    justify-content: flex-start;

    padding-left: 0;
  }

  .dfmax-apply-btn {
    width: 100%;
  }

  .dfmax-footer-main {
    padding: 50px 0 35px;
  }

  .dfmax-footer-bottom {
    text-align: center;
  }

  .dfmax-legal-links {
    justify-content: center;

    gap: 12px 18px;
  }
}

/* =========================================================
   SMALL MOBILE
   Below 576px
========================================================= */

@media (max-width: 575px) {
  .dfmax-header .container {
    padding-left: 15px;

    padding-right: 15px;
  }

  .dfmax-logo img {
    width: 135px;
  }

  .dfmax-footer-description {
    font-size: 13px;
  }
}

/* hero section styling starts from here */
/* =========================================================
   DFMAX HERO SECTION
========================================================= */

.dfmax-hero {
  position: relative;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 90% 20%,
      rgba(0, 156, 197, 0.12),
      transparent 32%
    ),
    radial-gradient(
      circle at 10% 90%,
      rgba(244, 123, 58, 0.08),
      transparent 30%
    ),
    var(--dfmax-light-gray);
}

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

.dfmax-hero > .container {
  position: relative;

  z-index: 2;
}

.dfmax-hero-content {
  padding: 40px 0 40px;
}

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

.dfmax-hero-badge {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  padding: 7px 13px 7px 7px;

  background: rgba(0, 156, 197, 0.08);

  border: 1px solid rgba(0, 156, 197, 0.16);

  border-radius: 50px;

  color: var(--dfmax-primary-dark);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.2px;

  margin-bottom: 24px;
}

.dfmax-badge-icon {
  width: 28px;

  height: 28px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  background: var(--dfmax-primary);

  color: var(--dfmax-white);

  border-radius: 50%;

  font-size: 12px;
}

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

.dfmax-hero h1 {
  max-width: 720px;

  margin-bottom: 22px;

  color: var(--dfmax-text);

  font-size: clamp(42px, 5vw, 68px);

  font-weight: 800;

  line-height: 1.08;

  letter-spacing: -2px;
}

.dfmax-hero h1 span {
  display: block;

  color: var(--dfmax-primary);
}

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

.dfmax-hero-description {
  max-width: 620px;

  margin-bottom: 27px;

  color: var(--dfmax-text-light);

  font-size: 17px;

  line-height: 1.75;
}

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

.dfmax-hero-features {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 12px 25px;

  margin-bottom: 30px;
}

.dfmax-hero-feature {
  display: flex;

  align-items: center;

  gap: 8px;

  color: var(--dfmax-text);

  font-size: 13px;

  font-weight: 600;
}

.dfmax-feature-icon {
  width: 21px;

  height: 21px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  background: rgba(22, 163, 74, 0.1);

  color: var(--dfmax-success);

  border-radius: 50%;

  font-size: 10px;
}

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

.dfmax-hero-buttons {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 12px;

  margin-bottom: 35px;
}

.dfmax-hero-btn-primary,
.dfmax-hero-btn-secondary {
  min-height: 52px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  padding: 13px 22px;

  border-radius: 8px;

  font-size: 14px;

  font-weight: 700;
}

/* Primary */

.dfmax-hero-btn-primary {
  background: var(--dfmax-accent);

  color: var(--dfmax-white);

  border: 1px solid var(--dfmax-accent);

  box-shadow: 0 8px 20px rgba(244, 123, 58, 0.2);
}

.dfmax-hero-btn-primary:hover {
  background: #d95f22;

  border-color: #d95f22;

  color: var(--dfmax-white);

  transform: translateY(-2px);

  box-shadow: 0 12px 25px rgba(244, 123, 58, 0.25);
}

/* Secondary */

.dfmax-hero-btn-secondary {
  background: var(--dfmax-white);

  color: var(--dfmax-primary-dark);

  border: 1px solid var(--dfmax-border);
}

.dfmax-hero-btn-secondary:hover {
  background: var(--dfmax-light-blue);

  border-color: var(--dfmax-primary);

  color: var(--dfmax-primary);

  transform: translateY(-2px);
}

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

.dfmax-hero-contact {
  display: flex;

  align-items: center;

  gap: 20px;
}

.dfmax-hero-contact-item {
  display: flex;

  align-items: center;

  gap: 10px;
}

.dfmax-contact-circle {
  width: 39px;

  height: 39px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  background: var(--dfmax-white);

  border: 1px solid var(--dfmax-border);

  color: var(--dfmax-primary);

  border-radius: 50%;
}

.dfmax-hero-contact-item small {
  display: block;

  color: var(--dfmax-text-light);

  font-size: 10px;

  font-weight: 600;

  margin-bottom: 1px;
}

.dfmax-hero-contact-item a,
.dfmax-hero-contact-item > div > span {
  display: block;

  color: var(--dfmax-text);

  font-size: 12px;

  font-weight: 700;
}

.dfmax-hero-contact-item a:hover {
  color: var(--dfmax-primary);
}

.dfmax-hero-contact-divider {
  width: 1px;

  height: 35px;

  background: var(--dfmax-border);
}

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

.dfmax-hero-visual {
  position: relative;

  min-height: 560px;

  display: flex;

  align-items: center;

  justify-content: center;
}

/* =========================================================
   DECORATIVE CIRCLES
========================================================= */

.dfmax-hero-circle {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;
}

.dfmax-hero-circle.circle-one {
  width: 390px;

  height: 390px;

  background: rgba(0, 156, 197, 0.07);

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);
}

.dfmax-hero-circle.circle-two {
  width: 260px;

  height: 260px;

  border: 1px solid rgba(0, 156, 197, 0.13);

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);
}

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

.dfmax-loan-card {
  position: relative;

  z-index: 3;

  width: 100%;

  max-width: 405px;

  padding: 28px;

  background: var(--dfmax-white);

  border: 1px solid rgba(0, 156, 197, 0.1);

  border-radius: 22px;

  box-shadow:
    0 25px 60px rgba(6, 59, 74, 0.12),
    0 5px 15px rgba(0, 0, 0, 0.04);
}

/* =========================================================
   LOAN CARD HEADER
========================================================= */

.dfmax-loan-card-header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 27px;
}

.dfmax-card-label {
  display: block;

  color: var(--dfmax-primary);

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 1.2px;

  margin-bottom: 4px;
}

.dfmax-loan-card-header h3 {
  margin: 0;

  color: var(--dfmax-text);

  font-size: 22px;

  font-weight: 750;
}

.dfmax-card-icon {
  width: 48px;

  height: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--dfmax-light-blue);

  color: var(--dfmax-primary);

  border-radius: 14px;

  font-size: 19px;
}

/* =========================================================
   LOAN AMOUNT
========================================================= */

.dfmax-loan-amount {
  padding: 18px;

  background: var(--dfmax-light-blue);

  border-radius: 13px;

  margin-bottom: 20px;
}

.dfmax-loan-amount span,
.dfmax-loan-amount small {
  display: block;

  color: var(--dfmax-text-light);

  font-size: 11px;
}

.dfmax-loan-amount strong {
  display: block;

  color: var(--dfmax-primary-dark);

  font-size: 30px;

  font-weight: 800;

  line-height: 1.3;

  margin: 2px 0;
}

/* =========================================================
   PROGRESS
========================================================= */

.dfmax-loan-progress {
  margin-bottom: 22px;
}

.dfmax-progress-label {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 8px;
}

.dfmax-progress-label span {
  color: var(--dfmax-text-light);

  font-size: 11px;
}

.dfmax-progress-label strong {
  color: var(--dfmax-primary);

  font-size: 11px;
}

.dfmax-progress-bar {
  width: 100%;

  height: 6px;

  overflow: hidden;

  background: #e8eef0;

  border-radius: 10px;
}

.dfmax-progress-bar span {
  display: block;

  width: 65%;

  height: 100%;

  background: linear-gradient(
    90deg,
    var(--dfmax-primary-dark),
    var(--dfmax-primary)
  );

  border-radius: inherit;
}

/* =========================================================
   LOAN TYPES
========================================================= */

.dfmax-loan-types {
  display: grid;

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

  gap: 8px;

  margin-bottom: 20px;
}

.dfmax-loan-type {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 6px;

  padding: 10px 5px;

  border: 1px solid var(--dfmax-border);

  border-radius: 10px;

  cursor: pointer;

  transition: var(--dfmax-transition);
}

.dfmax-loan-type span {
  width: 29px;

  height: 29px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--dfmax-light-gray);

  color: var(--dfmax-text-light);

  border-radius: 8px;

  font-size: 11px;
}

.dfmax-loan-type small {
  color: var(--dfmax-text-light);

  font-size: 9px;

  font-weight: 600;
}

.dfmax-loan-type:hover,
.dfmax-loan-type.active {
  border-color: rgba(0, 156, 197, 0.3);

  background: var(--dfmax-light-blue);
}

.dfmax-loan-type.active span {
  background: var(--dfmax-primary);

  color: var(--dfmax-white);
}

.dfmax-loan-type.active small {
  color: var(--dfmax-primary-dark);
}

/* =========================================================
   LOAN CARD BUTTON
========================================================= */

.dfmax-loan-card-btn {
  width: 100%;

  min-height: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  background: var(--dfmax-primary-dark);

  color: var(--dfmax-white);

  border-radius: 9px;

  font-size: 13px;

  font-weight: 700;
}

.dfmax-loan-card-btn:hover {
  background: var(--dfmax-primary);

  color: var(--dfmax-white);
}

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

.dfmax-card-trust {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  margin-top: 14px;

  color: var(--dfmax-text-light);

  font-size: 9px;
}

.dfmax-card-trust i {
  color: var(--dfmax-success);
}

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

.dfmax-hero-bottom {
  position: relative;

  z-index: 5;

  border-top: 1px solid var(--dfmax-border);

  background: rgba(255, 255, 255, 0.75);
}

.dfmax-trust-strip {
  display: grid;

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

  padding: 22px 0;
}

.dfmax-trust-item {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 11px;

  padding: 0 20px;

  border-right: 1px solid var(--dfmax-border);
}

.dfmax-trust-item:last-child {
  border-right: 0;
}

.dfmax-trust-item > span {
  width: 39px;

  height: 39px;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--dfmax-light-blue);

  color: var(--dfmax-primary);

  border-radius: 10px;
}

.dfmax-trust-item strong {
  display: block;

  color: var(--dfmax-text);

  font-size: 12px;
}

.dfmax-trust-item small {
  display: block;

  color: var(--dfmax-text-light);

  font-size: 9px;

  margin-top: 2px;
}

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

@media (max-width: 1199px) {
  .dfmax-hero-content {
    padding: 70px 0 50px;
  }

  .dfmax-hero h1 {
    font-size: clamp(40px, 5vw, 58px);
  }

  .dfmax-hero-visual {
    min-height: 500px;
  }

  .dfmax-loan-card {
    max-width: 380px;
  }

  .dfmax-floating-card {
    left: 0;
  }
}

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

@media (max-width: 991px) {
  .dfmax-hero-content {
    padding: 65px 0 20px;

    text-align: center;
  }

  .dfmax-hero h1 {
    max-width: 700px;

    margin-left: auto;

    margin-right: auto;
  }

  .dfmax-hero-description {
    margin-left: auto;

    margin-right: auto;
  }

  .dfmax-hero-features {
    justify-content: center;
  }

  .dfmax-hero-buttons {
    justify-content: center;
  }

  .dfmax-hero-contact {
    justify-content: center;
  }

  .dfmax-hero-visual {
    min-height: 550px;
  }

  .dfmax-trust-strip {
    grid-template-columns: repeat(2, 1fr);

    row-gap: 20px;
  }

  .dfmax-trust-item:nth-child(2) {
    border-right: 0;
  }

  .dfmax-trust-item:nth-child(3),
  .dfmax-trust-item:nth-child(4) {
    padding-top: 15px;
  }
}

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

@media (max-width: 767px) {
  .dfmax-hero-content {
    padding: 50px 0 15px;
  }

  .dfmax-hero-badge {
    font-size: 10px;

    margin-bottom: 18px;
  }

  .dfmax-hero h1 {
    font-size: 40px;

    letter-spacing: -1.5px;

    line-height: 1.1;

    margin-bottom: 18px;
  }

  .dfmax-hero-description {
    font-size: 14px;

    line-height: 1.7;

    margin-bottom: 22px;
  }

  .dfmax-hero-features {
    flex-direction: column;

    align-items: flex-start;

    width: fit-content;

    margin-left: auto;

    margin-right: auto;

    gap: 9px;
  }

  .dfmax-hero-buttons {
    flex-direction: column;

    width: 100%;

    max-width: 360px;

    margin-left: auto;

    margin-right: auto;
  }

  .dfmax-hero-btn-primary,
  .dfmax-hero-btn-secondary {
    width: 100%;
  }

  .dfmax-hero-contact {
    flex-direction: column;

    gap: 12px;
  }

  .dfmax-hero-contact-divider {
    display: none;
  }

  .dfmax-hero-visual {
    min-height: 510px;

    margin-top: 10px;
  }

  .dfmax-loan-card {
    max-width: 360px;

    padding: 22px;
  }

  .dfmax-floating-card {
    left: 50%;

    bottom: 25px;

    transform: translateX(-50%);

    width: max-content;
  }

  .dfmax-hero-circle.circle-one {
    width: 330px;

    height: 330px;
  }

  .dfmax-hero-circle.circle-two {
    width: 220px;

    height: 220px;
  }

  .dfmax-trust-strip {
    grid-template-columns: 1fr;

    padding: 10px 0;
  }

  .dfmax-trust-item,
  .dfmax-trust-item:nth-child(2),
  .dfmax-trust-item:nth-child(3),
  .dfmax-trust-item:nth-child(4) {
    justify-content: flex-start;

    border-right: 0;

    border-bottom: 1px solid var(--dfmax-border);

    padding: 13px 10px;
  }

  .dfmax-trust-item:last-child {
    border-bottom: 0;
  }
}

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

@media (max-width: 480px) {
  .dfmax-hero h1 {
    font-size: 35px;
  }

  .dfmax-loan-card {
    padding: 18px;

    border-radius: 18px;
  }

  .dfmax-loan-card-header h3 {
    font-size: 19px;
  }

  .dfmax-loan-amount strong {
    font-size: 26px;
  }

  .dfmax-loan-types {
    gap: 5px;
  }

  .dfmax-loan-type {
    padding: 8px 3px;
  }

  .dfmax-floating-card {
    bottom: 20px;
  }
}
/* hero section styling ends here */

/* DAFMAX loan services section styling starts from here */
.dfmax-loan-services {
  position: relative;
  padding: 60px 0 60px;
  background: var(--dfmax-white);
}

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

.dfmax-section-heading {
  max-width: 720px;

  margin: 0 auto 55px;
}

.dfmax-section-label {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: var(--dfmax-primary);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 1.4px;

  margin-bottom: 15px;
}

.dfmax-section-label i {
  font-size: 11px;
}

.dfmax-section-heading h2 {
  margin: 0 0 15px;

  color: var(--dfmax-text);

  font-size: clamp(32px, 4vw, 46px);

  font-weight: 800;

  line-height: 1.15;

  letter-spacing: -1.2px;
}

.dfmax-section-heading h2 span {
  color: var(--dfmax-primary);
}

.dfmax-section-heading p {
  max-width: 650px;

  margin: 0 auto;

  color: var(--dfmax-text-light);

  font-size: 15px;

  line-height: 1.75;
}

/* =========================================================
   LOAN SERVICE CARD
========================================================= */

.dfmax-loan-service-card {
  position: relative;

  height: 100%;

  padding: 27px;

  background: var(--dfmax-white);

  border: 1px solid var(--dfmax-border);

  border-radius: 16px;

  transition: var(--dfmax-transition);

  overflow: hidden;
}

/* Top orange line */

.dfmax-loan-service-card::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 0;

  height: 3px;

  background: var(--dfmax-accent);

  transition: width 0.35s ease;
}

/* Hover */

.dfmax-loan-service-card:hover {
  transform: translateY(-7px);

  border-color: rgba(0, 156, 197, 0.25);

  box-shadow: 0 18px 45px rgba(6, 59, 74, 0.09);
}

.dfmax-loan-service-card:hover::before {
  width: 100%;
}

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

.dfmax-loan-service-top {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 22px;
}

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

.dfmax-loan-service-icon {
  width: 48px;

  height: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--dfmax-light-blue);

  color: var(--dfmax-primary);

  border-radius: 12px;

  font-size: 18px;

  transition: var(--dfmax-transition);
}

.dfmax-loan-service-card:hover .dfmax-loan-service-icon {
  background: var(--dfmax-primary);

  color: var(--dfmax-white);
}

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

.dfmax-loan-service-number {
  color: #cbd5d9;

  font-size: 12px;

  font-weight: 800;
}

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

.dfmax-loan-service-card h3 {
  margin: 0 0 10px;

  color: var(--dfmax-text);

  font-size: 18px;

  font-weight: 700;

  line-height: 1.35;
}

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

.dfmax-loan-service-card p {
  min-height: 67px;

  margin: 0 0 20px;

  color: var(--dfmax-text-light);

  font-size: 13px;

  line-height: 1.7;
}

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

.dfmax-loan-service-link {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  color: var(--dfmax-primary-dark);

  font-size: 12px;

  font-weight: 700;
}

.dfmax-loan-service-link i {
  font-size: 10px;

  transition: transform 0.3s ease;
}

.dfmax-loan-service-link:hover {
  color: var(--dfmax-accent);
}

.dfmax-loan-service-card:hover .dfmax-loan-service-link i {
  transform: translateX(4px);
}

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

.dfmax-loan-services-bottom {
  margin-top: 45px;
}

.dfmax-view-all-loans {
  display: inline-flex;

  align-items: center;

  gap: 12px;

  color: var(--dfmax-primary-dark);

  font-size: 13px;

  font-weight: 700;
}

.dfmax-view-all-loans span {
  width: 35px;

  height: 35px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  background: var(--dfmax-light-blue);

  border-radius: 50%;

  transition: var(--dfmax-transition);
}

.dfmax-view-all-loans:hover {
  color: var(--dfmax-accent);
}

.dfmax-view-all-loans:hover span {
  background: var(--dfmax-accent);

  color: var(--dfmax-white);

  transform: translateX(3px);
}

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

@media (max-width: 991px) {
  .dfmax-loan-services {
    padding: 80px 0 85px;
  }

  .dfmax-section-heading {
    margin-bottom: 40px;
  }

  .dfmax-loan-service-card {
    padding: 24px;
  }
}

/* MOBILE*/
@media (max-width: 767px) {
  .dfmax-loan-services {
    padding: 65px 0 70px;
  }

  .dfmax-section-heading {
    margin-bottom: 35px;
  }

  .dfmax-section-heading h2 {
    font-size: 32px;
    letter-spacing: -0.8px;
  }

  .dfmax-section-heading p {
    font-size: 14px;
  }

  .dfmax-loan-service-card {
    padding: 23px;
  }

  .dfmax-loan-service-card p {
    min-height: auto;
  }
}

/* SMALL MOBILE*/
@media (max-width: 480px) {
  .dfmax-loan-services {
    padding: 55px 0 60px;
  }

  .dfmax-section-heading h2 {
    font-size: 29px;
  }

  .dfmax-section-label {
    font-size: 10px;
  }

  .dfmax-loan-service-card {
    padding: 21px;
  }
}
/* ends here */

/* why choose us section styling starts from here */
.dfmax-why-section {
  position: relative;

  padding: 60px 0;

  background: var(--dfmax-light-blue);

  overflow: hidden;
}

/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.dfmax-why-section::before {
  content: "";

  position: absolute;

  width: 400px;

  height: 400px;

  border-radius: 50%;

  background: rgba(0, 156, 197, 0.045);

  top: -200px;

  right: -100px;

  pointer-events: none;
}

.dfmax-why-section::after {
  content: "";

  position: absolute;

  width: 300px;

  height: 300px;

  border-radius: 50%;

  border: 1px solid rgba(0, 156, 197, 0.08);

  bottom: -150px;

  left: -100px;

  pointer-events: none;
}

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

.dfmax-why-content {
  position: relative;

  z-index: 2;
}

.dfmax-why-content h2 {
  max-width: 480px;

  margin: 0 0 18px;

  color: var(--dfmax-text);

  font-size: clamp(34px, 4vw, 48px);

  font-weight: 800;

  line-height: 1.13;

  letter-spacing: -1.3px;
}

.dfmax-why-content h2 span {
  display: block;

  color: var(--dfmax-primary);
}

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

.dfmax-why-description {
  max-width: 500px;

  margin-bottom: 27px;

  color: var(--dfmax-text-light);

  font-size: 14px;

  line-height: 1.8;
}

/* =========================================================
   HIGHLIGHT BOX
========================================================= */

.dfmax-why-highlight {
  display: flex;

  align-items: flex-start;

  gap: 14px;

  max-width: 490px;

  padding: 17px;

  margin-bottom: 28px;

  background: var(--dfmax-white);

  border: 1px solid rgba(0, 156, 197, 0.12);

  border-radius: 12px;
}

.dfmax-why-highlight-icon {
  width: 42px;

  height: 42px;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--dfmax-light-blue);

  color: var(--dfmax-primary);

  border-radius: 10px;

  font-size: 16px;
}

.dfmax-why-highlight strong {
  display: block;

  margin-bottom: 3px;

  color: var(--dfmax-text);

  font-size: 13px;
}

.dfmax-why-highlight p {
  margin: 0;

  color: var(--dfmax-text-light);

  font-size: 11px;

  line-height: 1.6;
}

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

.dfmax-why-btn {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: var(--dfmax-primary-dark);

  font-size: 13px;

  font-weight: 700;
}

.dfmax-why-btn span {
  width: 34px;

  height: 34px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--dfmax-white);

  color: var(--dfmax-primary);

  border: 1px solid var(--dfmax-border);

  border-radius: 50%;

  transition: var(--dfmax-transition);
}

.dfmax-why-btn:hover {
  color: var(--dfmax-accent);
}

.dfmax-why-btn:hover span {
  background: var(--dfmax-accent);

  border-color: var(--dfmax-accent);

  color: var(--dfmax-white);

  transform: translateX(4px);
}

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

.dfmax-why-features {
  position: relative;

  z-index: 2;

  display: grid;

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

  gap: 16px;
}

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

.dfmax-why-card {
  position: relative;

  min-height: 205px;

  padding: 24px;

  background: var(--dfmax-white);

  border: 1px solid rgba(0, 0, 0, 0.055);

  border-radius: 15px;

  transition: var(--dfmax-transition);

  overflow: hidden;
}

.dfmax-why-card:hover {
  transform: translateY(-5px);

  border-color: rgba(0, 156, 197, 0.22);

  box-shadow: 0 15px 35px rgba(6, 59, 74, 0.08);
}

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

.dfmax-why-card-number {
  position: absolute;

  top: 20px;

  right: 22px;

  color: #dce7ea;

  font-size: 12px;

  font-weight: 800;
}

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

.dfmax-why-card-icon {
  width: 47px;

  height: 47px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 19px;

  background: var(--dfmax-light-blue);

  color: var(--dfmax-primary);

  border-radius: 12px;

  font-size: 17px;

  transition: var(--dfmax-transition);
}

.dfmax-why-card:hover .dfmax-why-card-icon {
  background: var(--dfmax-primary);

  color: var(--dfmax-white);
}

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

.dfmax-why-card-content h3 {
  margin: 0 0 8px;

  color: var(--dfmax-text);

  font-size: 16px;

  font-weight: 700;

  line-height: 1.35;
}

.dfmax-why-card-content p {
  margin: 0;

  color: var(--dfmax-text-light);

  font-size: 11px;

  line-height: 1.7;
}

/* =========================================================
   STATISTICS WRAPPER
========================================================= */

.dfmax-stats-wrapper {
  position: relative;

  z-index: 3;

  display: grid;

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

  margin-top: 70px;

  padding: 25px 0;

  background: var(--dfmax-white);

  border: 1px solid var(--dfmax-border);

  border-radius: 15px;

  box-shadow: 0 10px 35px rgba(6, 59, 74, 0.05);
}

/* =========================================================
   STAT ITEM
========================================================= */

.dfmax-stat-item {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  padding: 5px 20px;

  border-right: 1px solid var(--dfmax-border);
}

.dfmax-stat-item:last-child {
  border-right: 0;
}

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

.dfmax-stat-icon {
  width: 42px;

  height: 42px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  background: var(--dfmax-light-blue);

  color: var(--dfmax-primary);

  border-radius: 10px;

  font-size: 15px;
}

/* =========================================================
   STAT NUMBER
========================================================= */

.dfmax-stat-item strong {
  display: block;

  color: var(--dfmax-primary-dark);

  font-size: 20px;

  font-weight: 800;

  line-height: 1.2;
}

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

.dfmax-stat-item span {
  display: block;

  margin-top: 2px;

  color: var(--dfmax-text-light);

  font-size: 10px;

  white-space: nowrap;
}

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

@media (max-width: 991px) {
  .dfmax-why-section {
    padding: 80px 0;
  }

  .dfmax-why-content {
    text-align: center;
  }

  .dfmax-why-content h2 {
    margin-left: auto;

    margin-right: auto;
  }

  .dfmax-why-description {
    margin-left: auto;

    margin-right: auto;
  }

  .dfmax-why-highlight {
    margin-left: auto;

    margin-right: auto;

    text-align: left;
  }

  .dfmax-why-features {
    margin-top: 20px;
  }

  .dfmax-stats-wrapper {
    grid-template-columns: repeat(2, 1fr);

    row-gap: 20px;
  }

  .dfmax-stat-item:nth-child(2) {
    border-right: 0;
  }

  .dfmax-stat-item:nth-child(3),
  .dfmax-stat-item:nth-child(4) {
    padding-top: 15px;
  }
}

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

@media (max-width: 767px) {
  .dfmax-why-section {
    padding: 65px 0;
  }

  .dfmax-why-content h2 {
    font-size: 32px;

    letter-spacing: -0.8px;
  }

  .dfmax-why-description {
    font-size: 13px;
  }

  .dfmax-why-features {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .dfmax-why-card {
    min-height: auto;

    padding: 21px;
  }

  .dfmax-why-card-icon {
    margin-bottom: 15px;
  }

  .dfmax-stats-wrapper {
    grid-template-columns: 1fr;

    margin-top: 45px;

    padding: 10px 15px;
  }

  .dfmax-stat-item,
  .dfmax-stat-item:nth-child(2),
  .dfmax-stat-item:nth-child(3),
  .dfmax-stat-item:nth-child(4) {
    justify-content: flex-start;

    border-right: 0;

    border-bottom: 1px solid var(--dfmax-border);

    padding: 14px 5px;
  }

  .dfmax-stat-item:last-child {
    border-bottom: 0;
  }
}

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

@media (max-width: 480px) {
  .dfmax-why-section {
    padding: 55px 0;
  }

  .dfmax-why-content h2 {
    font-size: 29px;
  }

  .dfmax-why-highlight {
    padding: 14px;
  }

  .dfmax-why-card {
    padding: 19px;
  }
}
/* ends here */

/* how it works section styling starts from here */
.dfmax-how-section {
  position: relative;

  padding: 60px 0;

  background: var(--dfmax-white);

  overflow: hidden;
}

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

.dfmax-how-section .dfmax-section-heading {
  margin-bottom: 65px;
}

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

.dfmax-process-wrapper {
  position: relative;

  display: grid;

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

  gap: 20px;
}

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

.dfmax-process-line {
  position: absolute;

  top: 47px;

  left: 10%;

  width: 80%;

  height: 2px;

  background: #dde9ec;

  z-index: 1;
}

.dfmax-process-line span {
  display: block;

  width: 100%;

  height: 100%;

  background: linear-gradient(
    90deg,
    var(--dfmax-primary-dark),
    var(--dfmax-primary)
  );

  transform-origin: left;
}

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

.dfmax-process-step {
  position: relative;

  z-index: 2;

  text-align: center;
}

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

.dfmax-process-number {
  margin-bottom: 10px;

  color: #b7c9ce;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1px;
}

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

.dfmax-process-icon {
  width: 64px;

  height: 64px;

  margin: 0 auto 22px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--dfmax-white);

  border: 2px solid var(--dfmax-primary);

  color: var(--dfmax-primary);

  border-radius: 50%;

  font-size: 19px;

  box-shadow:
    0 0 0 7px var(--dfmax-white),
    0 8px 20px rgba(0, 156, 197, 0.1);

  transition: var(--dfmax-transition);
}

.dfmax-process-step:hover .dfmax-process-icon {
  background: var(--dfmax-primary);

  color: var(--dfmax-white);

  border-color: var(--dfmax-primary);

  transform: translateY(-5px);

  box-shadow:
    0 0 0 7px var(--dfmax-white),
    0 12px 25px rgba(0, 156, 197, 0.2);
}

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

.dfmax-process-content {
  padding: 0 5px;
}

.dfmax-process-content h3 {
  margin: 0 0 9px;

  color: var(--dfmax-text);

  font-size: 16px;

  font-weight: 700;

  line-height: 1.35;
}

.dfmax-process-content p {
  max-width: 190px;

  margin: 0 auto;

  color: var(--dfmax-text-light);

  font-size: 11px;

  line-height: 1.7;
}

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

.dfmax-process-cta {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 25px;

  margin-top: 70px;

  padding: 22px 25px;

  background: var(--dfmax-light-blue);

  border: 1px solid rgba(0, 156, 197, 0.1);

  border-radius: 14px;
}

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

.dfmax-process-cta-content {
  display: flex;

  align-items: center;

  gap: 14px;
}

.dfmax-process-cta-icon {
  width: 46px;

  height: 46px;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--dfmax-white);

  color: var(--dfmax-primary);

  border-radius: 11px;

  font-size: 17px;
}

.dfmax-process-cta-content h3 {
  margin: 0 0 3px;

  color: var(--dfmax-text);

  font-size: 14px;

  font-weight: 700;
}

.dfmax-process-cta-content p {
  margin: 0;

  color: var(--dfmax-text-light);

  font-size: 11px;
}

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

.dfmax-process-cta-btn {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  flex-shrink: 0;

  min-height: 43px;

  padding: 10px 18px;

  background: var(--dfmax-primary-dark);

  color: var(--dfmax-white);

  border-radius: 7px;

  font-size: 12px;

  font-weight: 700;
}

.dfmax-process-cta-btn:hover {
  background: var(--dfmax-accent);

  color: var(--dfmax-white);

  transform: translateY(-2px);
}

/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {
  .dfmax-process-content p {
    max-width: 200px;
  }
}

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

@media (max-width: 991px) {
  .dfmax-how-section {
    padding: 80px 0;
  }

  .dfmax-how-section .dfmax-section-heading {
    margin-bottom: 50px;
  }

  .dfmax-process-wrapper {
    grid-template-columns: repeat(2, 1fr);

    gap: 45px 25px;
  }

  .dfmax-process-line {
    display: none;
  }

  .dfmax-process-content p {
    max-width: 260px;
  }

  .dfmax-process-cta {
    margin-top: 55px;
  }
}

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

@media (max-width: 767px) {
  .dfmax-how-section {
    padding: 65px 0;
  }

  .dfmax-how-section .dfmax-section-heading {
    margin-bottom: 40px;
  }

  .dfmax-process-wrapper {
    display: flex;

    flex-direction: column;

    gap: 0;

    padding-left: 25px;
  }

  .dfmax-process-line {
    display: block;

    top: 30px;

    left: 56px;

    width: 2px;

    height: calc(100% - 60px);
  }

  .dfmax-process-line span {
    width: 100%;

    height: 100%;

    background: linear-gradient(
      180deg,
      var(--dfmax-primary-dark),
      var(--dfmax-primary)
    );
  }

  .dfmax-process-step {
    display: grid;

    grid-template-columns: 64px 1fr;

    column-gap: 18px;

    text-align: left;

    min-height: 150px;
  }

  .dfmax-process-number {
    display: none;
  }

  .dfmax-process-icon {
    grid-column: 1;

    grid-row: 1;

    margin: 0;

    width: 58px;

    height: 58px;

    font-size: 17px;

    box-shadow:
      0 0 0 6px var(--dfmax-white),
      0 7px 18px rgba(0, 156, 197, 0.1);
  }

  .dfmax-process-content {
    grid-column: 2;

    grid-row: 1;

    padding-top: 3px;

    padding-left: 0;
  }

  .dfmax-process-content h3 {
    font-size: 15px;

    margin-bottom: 7px;
  }

  .dfmax-process-content p {
    max-width: none;

    margin: 0;

    font-size: 11px;
  }

  .dfmax-process-cta {
    flex-direction: column;

    align-items: stretch;

    gap: 18px;

    margin-top: 35px;

    padding: 20px;
  }

  .dfmax-process-cta-content {
    align-items: flex-start;
  }

  .dfmax-process-cta-btn {
    width: 100%;
  }
}

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

@media (max-width: 480px) {
  .dfmax-how-section {
    padding: 55px 0;
  }

  .dfmax-process-wrapper {
    padding-left: 15px;
  }

  .dfmax-process-step {
    grid-template-columns: 55px 1fr;

    column-gap: 15px;

    min-height: 145px;
  }

  .dfmax-process-icon {
    width: 52px;

    height: 52px;

    font-size: 15px;
  }

  .dfmax-process-line {
    left: 40px;
  }

  .dfmax-process-content h3 {
    font-size: 14px;
  }

  .dfmax-process-content p {
    font-size: 10px;

    line-height: 1.65;
  }

  .dfmax-process-cta {
    padding: 17px;
  }
}
/* ends here */

/* EMI calculator section styling starts from here */
.dfmax-finance-tools {
  position: relative;

  padding: 60px 0;

  background: var(--dfmax-light-gray);

  overflow: hidden;
}

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

.dfmax-finance-tools .dfmax-section-heading {
  margin-bottom: 55px;
}

/* =========================================================
   COMMON TOOL CARD
========================================================= */

.dfmax-emi-card,
.dfmax-eligibility-card {
  height: 100%;

  border-radius: 20px;

  overflow: hidden;
}

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

.dfmax-emi-card {
  padding: 32px;

  background: var(--dfmax-white);

  border: 1px solid var(--dfmax-border);

  box-shadow: 0 15px 45px rgba(6, 59, 74, 0.06);
}

/* =========================================================
   TOOL CARD HEADER
========================================================= */

.dfmax-tool-card-header {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 20px;

  margin-bottom: 30px;
}

.dfmax-tool-label {
  display: block;

  color: var(--dfmax-primary);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1.2px;

  margin-bottom: 7px;
}

.dfmax-tool-card-header h3 {
  margin: 0 0 5px;

  color: var(--dfmax-text);

  font-size: 21px;

  font-weight: 750;
}

.dfmax-tool-card-header p {
  margin: 0;

  color: var(--dfmax-text-light);

  font-size: 11px;
}

.dfmax-tool-header-icon {
  width: 48px;

  height: 48px;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--dfmax-light-blue);

  color: var(--dfmax-primary);

  border-radius: 12px;

  font-size: 17px;
}

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

.dfmax-form-group {
  margin-bottom: 22px;
}

.dfmax-form-group > label {
  display: block;

  margin-bottom: 8px;

  color: var(--dfmax-text);

  font-size: 11px;

  font-weight: 700;
}

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

.dfmax-form-label-row {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 10px;
}

.dfmax-form-label-row label {
  margin: 0;

  color: var(--dfmax-text);

  font-size: 11px;

  font-weight: 700;
}

.dfmax-form-label-row span {
  padding: 4px 9px;

  background: var(--dfmax-light-blue);

  color: var(--dfmax-primary-dark);

  border-radius: 5px;

  font-size: 11px;

  font-weight: 700;
}

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

.dfmax-range {
  width: 100%;

  height: 5px;

  appearance: none;

  -webkit-appearance: none;

  background: #dde8eb;

  border-radius: 10px;

  outline: none;

  cursor: pointer;
}

.dfmax-range::-webkit-slider-thumb {
  appearance: none;

  -webkit-appearance: none;

  width: 18px;

  height: 18px;

  background: var(--dfmax-primary);

  border: 3px solid var(--dfmax-white);

  border-radius: 50%;

  box-shadow: 0 2px 8px rgba(0, 156, 197, 0.25);

  cursor: pointer;
}

.dfmax-range::-moz-range-thumb {
  width: 18px;

  height: 18px;

  background: var(--dfmax-primary);

  border: 3px solid var(--dfmax-white);

  border-radius: 50%;

  box-shadow: 0 2px 8px rgba(0, 156, 197, 0.25);

  cursor: pointer;
}

.dfmax-range-values {
  display: flex;

  justify-content: space-between;

  margin-top: 6px;

  color: #98a7ab;

  font-size: 9px;
}

/* =========================================================
   INPUTS
========================================================= */

.dfmax-input-wrapper {
  position: relative;
}

.dfmax-input-wrapper .form-control,
.dfmax-input-wrapper .form-select {
  min-height: 46px;

  border-color: var(--dfmax-border);

  border-radius: 8px;

  color: var(--dfmax-text);

  font-size: 12px;
}

.dfmax-input-wrapper .form-control:focus,
.dfmax-input-wrapper .form-select:focus {
  border-color: var(--dfmax-primary);

  box-shadow: 0 0 0 3px rgba(0, 156, 197, 0.1);
}

.dfmax-input-wrapper > span {
  position: absolute;

  top: 50%;

  right: 14px;

  transform: translateY(-50%);

  color: var(--dfmax-text-light);

  font-size: 12px;

  font-weight: 600;
}

/* =========================================================
   EMI RESULT
========================================================= */

.dfmax-emi-result {
  padding: 20px;

  margin-top: 5px;

  margin-bottom: 20px;

  background: var(--dfmax-light-blue);

  border-radius: 13px;
}

.dfmax-emi-main-result {
  text-align: center;

  padding-bottom: 18px;

  margin-bottom: 17px;

  border-bottom: 1px solid rgba(0, 107, 135, 0.1);
}

.dfmax-emi-main-result span {
  display: block;

  margin-bottom: 5px;

  color: var(--dfmax-text-light);

  font-size: 10px;

  font-weight: 600;
}

.dfmax-emi-main-result strong {
  display: block;

  color: var(--dfmax-primary-dark);

  font-size: 30px;

  font-weight: 800;

  line-height: 1.2;
}

/* =========================================================
   EMI RESULT DETAILS
========================================================= */

.dfmax-emi-result-details {
  display: grid;

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

  gap: 10px;
}

.dfmax-emi-result-details > div {
  text-align: center;
}

.dfmax-emi-result-details span {
  display: block;

  color: var(--dfmax-text-light);

  font-size: 9px;

  margin-bottom: 4px;
}

.dfmax-emi-result-details strong {
  color: var(--dfmax-text);

  font-size: 11px;

  font-weight: 700;
}

/* =========================================================
   TOOL PRIMARY BUTTON
========================================================= */

.dfmax-tool-primary-btn {
  width: 100%;

  min-height: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  background: var(--dfmax-primary-dark);

  border: 1px solid var(--dfmax-primary-dark);

  color: var(--dfmax-white);

  border-radius: 8px;

  font-size: 12px;

  font-weight: 700;

  cursor: pointer;

  transition: var(--dfmax-transition);
}

.dfmax-tool-primary-btn:hover {
  background: var(--dfmax-primary);

  border-color: var(--dfmax-primary);

  color: var(--dfmax-white);

  transform: translateY(-2px);
}

/* =========================================================
   DISCLAIMER
========================================================= */

.dfmax-tool-disclaimer {
  display: block;

  margin-top: 12px;

  color: #98a7ab;

  font-size: 9px;

  line-height: 1.6;
}

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

.dfmax-eligibility-card {
  position: relative;

  padding: 32px;

  background: var(--dfmax-primary-dark);

  color: var(--dfmax-white);

  box-shadow: 0 20px 50px rgba(0, 107, 135, 0.16);
}

/* =========================================================
   ELIGIBILITY DECORATION
========================================================= */

.dfmax-eligibility-decoration {
  position: absolute;

  width: 230px;

  height: 230px;

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

  border-radius: 50%;

  top: -120px;

  right: -90px;
}

.dfmax-eligibility-decoration::after {
  content: "";

  position: absolute;

  width: 160px;

  height: 160px;

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

  border-radius: 50%;

  top: 34px;

  left: 34px;
}

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

.dfmax-eligibility-header {
  position: relative;

  z-index: 2;

  margin-bottom: 25px;
}

.dfmax-eligibility-header .dfmax-tool-label {
  color: #8ddfef;
}

.dfmax-eligibility-header h3 {
  max-width: 350px;

  margin: 0 0 9px;

  color: var(--dfmax-white);

  font-size: 25px;

  font-weight: 800;

  line-height: 1.25;
}

.dfmax-eligibility-header p {
  max-width: 380px;

  margin: 0;

  color: rgba(255, 255, 255, 0.7);

  font-size: 11px;

  line-height: 1.7;
}

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

.dfmax-eligibility-form {
  position: relative;

  z-index: 2;
}

.dfmax-eligibility-form .dfmax-form-group {
  margin-bottom: 15px;
}

.dfmax-eligibility-form .dfmax-form-group > label {
  color: rgba(255, 255, 255, 0.85);
}

/* =========================================================
   WHITE INPUT
========================================================= */

.dfmax-white-input {
  display: flex;

  align-items: center;

  min-height: 46px;

  background: var(--dfmax-white);

  border-radius: 8px;

  overflow: hidden;
}

.dfmax-white-input > span {
  padding-left: 14px;

  color: var(--dfmax-primary-dark);

  font-size: 12px;

  font-weight: 700;
}

.dfmax-white-input input {
  width: 100%;

  height: 46px;

  padding: 0 12px;

  border: 0;

  outline: 0;

  background: transparent;

  color: var(--dfmax-text);

  font-size: 12px;
}

.dfmax-white-select {
  min-height: 46px;

  border: 0;

  border-radius: 8px;

  font-size: 12px;
}

.dfmax-white-select:focus {
  border-color: transparent;

  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}

/* Simple CIBIL input */

.dfmax-white-input-simple {
  min-height: 46px;

  background: var(--dfmax-white);

  border: 0;

  border-radius: 8px;

  font-size: 12px;
}

.dfmax-white-input-simple:focus {
  background: var(--dfmax-white);

  border: 0;

  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}

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

.dfmax-eligibility-btn {
  width: 100%;

  min-height: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  margin-top: 21px;

  background: var(--dfmax-accent);

  border: 1px solid var(--dfmax-accent);

  color: var(--dfmax-white);

  border-radius: 8px;

  font-size: 12px;

  font-weight: 700;

  cursor: pointer;

  transition: var(--dfmax-transition);
}

.dfmax-eligibility-btn:hover {
  background: #d95f22;

  border-color: #d95f22;

  color: var(--dfmax-white);

  transform: translateY(-2px);
}

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

.dfmax-eligibility-trust {
  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  margin-top: 17px;

  color: rgba(255, 255, 255, 0.5);

  font-size: 9px;
}

.dfmax-eligibility-trust i {
  color: #6dd6a0;
}

/* =========================================================
   QUICK TOOLS
========================================================= */

.dfmax-quick-tools {
  display: grid;

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

  gap: 15px;

  margin-top: 20px;
}

.dfmax-quick-tool {
  display: flex;

  align-items: center;

  gap: 12px;

  padding: 17px 18px;

  background: var(--dfmax-white);

  border: 1px solid var(--dfmax-border);

  border-radius: 12px;

  color: var(--dfmax-text);

  transition: var(--dfmax-transition);
}

.dfmax-quick-tool:hover {
  border-color: rgba(0, 156, 197, 0.25);

  transform: translateY(-3px);

  box-shadow: 0 10px 25px rgba(6, 59, 74, 0.06);
}

/* =========================================================
   QUICK TOOL ICON
========================================================= */

.dfmax-quick-tool-icon {
  width: 38px;

  height: 38px;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--dfmax-light-blue);

  color: var(--dfmax-primary);

  border-radius: 9px;

  font-size: 14px;
}

/* =========================================================
   QUICK TOOL CONTENT
========================================================= */

.dfmax-quick-tool strong {
  display: block;

  color: var(--dfmax-text);

  font-size: 11px;

  font-weight: 700;
}

.dfmax-quick-tool small {
  display: block;

  margin-top: 2px;

  color: var(--dfmax-text-light);

  font-size: 9px;
}

.dfmax-quick-tool > i {
  margin-left: auto;

  color: var(--dfmax-primary);

  font-size: 10px;
}

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

@media (max-width: 991px) {
  .dfmax-finance-tools {
    padding: 80px 0;
  }

  .dfmax-emi-card,
  .dfmax-eligibility-card {
    padding: 27px;
  }

  .dfmax-quick-tools {
    grid-template-columns: 1fr;
  }
}

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

@media (max-width: 767px) {
  .dfmax-finance-tools {
    padding: 65px 0;
  }

  .dfmax-finance-tools .dfmax-section-heading {
    margin-bottom: 35px;
  }

  .dfmax-emi-card,
  .dfmax-eligibility-card {
    padding: 22px;

    border-radius: 16px;
  }

  .dfmax-tool-card-header h3 {
    font-size: 19px;
  }

  .dfmax-eligibility-header h3 {
    font-size: 22px;
  }

  .dfmax-emi-result-details {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .dfmax-emi-result-details > div {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;
  }

  .dfmax-emi-result-details span {
    margin: 0;
  }

  .dfmax-quick-tool {
    padding: 15px;
  }
}

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

@media (max-width: 480px) {
  .dfmax-finance-tools {
    padding: 55px 0;
  }

  .dfmax-emi-card,
  .dfmax-eligibility-card {
    padding: 19px;
  }

  .dfmax-tool-header-icon {
    width: 42px;

    height: 42px;

    font-size: 15px;
  }

  .dfmax-emi-main-result strong {
    font-size: 27px;
  }

  .dfmax-loan-amount {
    padding: 15px;
  }
}
/* ends here */

/* partner banks section styling starts from here */
.dfmax-partners-section {
  position: relative;
  padding: 60px 0;
  background: var(--dfmax-white);
  overflow: hidden;
}

/* -----------------------------------------
   Section Heading
----------------------------------------- */

.dfmax-partners-section .dfmax-section-heading {
  max-width: 760px;
  margin: 0 auto 50px;
}

.dfmax-section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;

  color: var(--dfmax-primary);
}

.dfmax-section-label i {
  font-size: 14px;
}

.dfmax-partners-section .dfmax-section-heading h2 {
  margin: 0 0 15px;

  color: var(--dfmax-text);
  font-size: 38px;
  line-height: 1.25;
  font-weight: 800;
}

.dfmax-partners-section .dfmax-section-heading h2 span {
  color: var(--dfmax-primary);
}

.dfmax-partners-section .dfmax-section-heading p {
  max-width: 680px;
  margin: 0 auto;

  color: var(--dfmax-text-light);
  font-size: 16px;
  line-height: 1.7;
}

/* -----------------------------------------
   Partner Wrapper
----------------------------------------- */

.dfmax-partners-wrapper {
  max-width: 1100px;
  margin: 0 auto;
}

/* -----------------------------------------
   Partner Card
----------------------------------------- */

.dfmax-partner-card {
  min-height: 150px;

  padding: 25px 15px;

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

  text-align: center;

  background: var(--dfmax-white);
  border: 1px solid var(--dfmax-border);
  border-radius: var(--dfmax-radius);

  transition: var(--dfmax-transition);
}

.dfmax-partner-card:hover {
  border-color: rgba(0, 156, 197, 0.35);

  transform: translateY(-5px);

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

/* -----------------------------------------
   Partner Logo
----------------------------------------- */

.dfmax-partner-logo {
  width: 65px;
  height: 65px;

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

  margin-bottom: 15px;

  border-radius: 50%;

  color: var(--dfmax-primary);
  background: var(--dfmax-light-blue);

  font-size: 25px;

  transition: var(--dfmax-transition);
}

.dfmax-partner-card:hover .dfmax-partner-logo {
  color: var(--dfmax-white);
  background: var(--dfmax-primary);
}

.dfmax-partner-card span {
  color: var(--dfmax-text);
  font-size: 13px;
  font-weight: 600;
}

/* -----------------------------------------
   Partner Disclaimer
----------------------------------------- */

.dfmax-partner-note {
  max-width: 900px;

  display: flex;
  align-items: flex-start;
  gap: 12px;

  margin: 40px auto 0;
  padding: 16px 20px;

  background: var(--dfmax-light-gray);
  border: 1px solid var(--dfmax-border);
  border-radius: 8px;
}

.dfmax-partner-note i {
  flex-shrink: 0;

  margin-top: 3px;

  color: var(--dfmax-primary);
  font-size: 15px;
}

.dfmax-partner-note p {
  margin: 0;

  color: var(--dfmax-text-light);
  font-size: 13px;
  line-height: 1.6;
}

/* -----------------------------------------
   Partner CTA
----------------------------------------- */

.dfmax-partner-cta {
  max-width: 1100px;

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

  margin: 45px auto 0;
  padding: 25px 30px;

  background: linear-gradient(135deg, var(--dfmax-light-blue), #ffffff);

  border: 1px solid rgba(0, 156, 197, 0.15);
  border-radius: 12px;
}

.dfmax-partner-cta-content {
  display: flex;
  align-items: center;
  gap: 18px;
}

.dfmax-partner-cta-icon {
  width: 52px;
  height: 52px;

  flex-shrink: 0;

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

  border-radius: 10px;

  color: var(--dfmax-white);
  background: var(--dfmax-primary);

  font-size: 20px;
}

.dfmax-partner-cta h4 {
  margin: 0 0 5px;

  color: var(--dfmax-text);
  font-size: 17px;
  font-weight: 700;
}

.dfmax-partner-cta p {
  margin: 0;

  color: var(--dfmax-text-light);
  font-size: 13px;
}

/* -----------------------------------------
   Button
----------------------------------------- */

.dfmax-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  padding: 12px 20px;

  border-radius: 7px;

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

  text-decoration: none;

  transition: var(--dfmax-transition);
}

.dfmax-btn-primary {
  color: var(--dfmax-white);
  background: var(--dfmax-primary);
}

.dfmax-btn-primary:hover {
  color: var(--dfmax-white);
  background: var(--dfmax-primary-dark);

  transform: translateY(-2px);
}

.dfmax-btn-primary i {
  font-size: 12px;
}

/* -----------------------------------------
   Responsive
----------------------------------------- */

@media (max-width: 991px) {
  .dfmax-partners-section {
    padding: 75px 0;
  }

  .dfmax-partners-section .dfmax-section-heading h2 {
    font-size: 34px;
  }

  .dfmax-partner-cta {
    align-items: flex-start;
    flex-direction: column;
  }

  .dfmax-partner-cta .dfmax-btn {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .dfmax-partners-section {
    padding: 60px 0;
  }

  .dfmax-partners-section .dfmax-section-heading {
    margin-bottom: 35px;
  }

  .dfmax-partners-section .dfmax-section-heading h2 {
    font-size: 29px;
  }

  .dfmax-partners-section .dfmax-section-heading p {
    font-size: 14px;
  }

  .dfmax-partner-card {
    min-height: 135px;
    padding: 20px 10px;
  }

  .dfmax-partner-logo {
    width: 55px;
    height: 55px;

    margin-bottom: 12px;

    font-size: 21px;
  }

  .dfmax-partner-note {
    margin-top: 30px;
    padding: 14px 15px;
  }

  .dfmax-partner-cta {
    margin-top: 30px;
    padding: 20px;
  }
}

@media (max-width: 575px) {
  .dfmax-partners-section .dfmax-section-heading h2 {
    font-size: 26px;
  }

  .dfmax-partner-card {
    min-height: 125px;
  }

  .dfmax-partner-card span {
    font-size: 12px;
  }

  .dfmax-partner-cta-content {
    align-items: flex-start;
  }

  .dfmax-partner-cta h4 {
    font-size: 15px;
  }
}
/* ends here */

/* testimonial section styling starts from here */
.dfmax-testimonials-section {
  position: relative;
  padding: 60px 0;
  background: var(--dfmax-light-gray);
  overflow: hidden;
}

/* -----------------------------------------
   Section Heading
----------------------------------------- */

.dfmax-testimonials-section .dfmax-section-heading {
  max-width: 760px;
  margin: 0 auto 50px;
}

.dfmax-testimonials-section .dfmax-section-heading h2 {
  margin: 0 0 15px;

  color: var(--dfmax-text);
  font-size: 38px;
  line-height: 1.25;
  font-weight: 800;
}

.dfmax-testimonials-section .dfmax-section-heading h2 span {
  color: var(--dfmax-primary);
}

.dfmax-testimonials-section .dfmax-section-heading p {
  max-width: 680px;
  margin: 0 auto;

  color: var(--dfmax-text-light);
  font-size: 16px;
  line-height: 1.7;
}

/* -----------------------------------------
   Testimonial Card
----------------------------------------- */

.dfmax-testimonial-card {
  height: 100%;

  padding: 30px;

  background: var(--dfmax-white);
  border: 1px solid var(--dfmax-border);
  border-radius: 12px;

  transition: var(--dfmax-transition);

  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
}

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

  border-color: rgba(0, 156, 197, 0.25);

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

/* -----------------------------------------
   Top Area
----------------------------------------- */

.dfmax-testimonial-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 22px;
}

/* -----------------------------------------
   Quote Icon
----------------------------------------- */

.dfmax-testimonial-quote {
  width: 46px;
  height: 46px;

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

  border-radius: 10px;

  color: var(--dfmax-white);
  background: var(--dfmax-primary);

  font-size: 18px;
}

/* -----------------------------------------
   Rating
----------------------------------------- */

.dfmax-testimonial-rating {
  display: flex;
  gap: 3px;
}

.dfmax-testimonial-rating i {
  color: var(--dfmax-accent);
  font-size: 13px;
}

/* -----------------------------------------
   Testimonial Text
----------------------------------------- */

.dfmax-testimonial-text {
  min-height: 105px;

  margin: 0 0 25px;

  color: var(--dfmax-text-light);

  font-size: 15px;
  line-height: 1.8;
}

/* -----------------------------------------
   Customer
----------------------------------------- */

.dfmax-testimonial-user {
  display: flex;
  align-items: center;
  gap: 13px;

  padding-top: 20px;

  border-top: 1px solid var(--dfmax-border);
}

.dfmax-testimonial-avatar {
  width: 45px;
  height: 45px;

  flex-shrink: 0;

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

  border-radius: 50%;

  color: var(--dfmax-white);
  background: linear-gradient(
    135deg,
    var(--dfmax-primary),
    var(--dfmax-primary-dark)
  );

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

.dfmax-testimonial-user h4 {
  margin: 0 0 3px;

  color: var(--dfmax-text);

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

.dfmax-testimonial-user span {
  color: var(--dfmax-text-light);

  font-size: 12px;
}

/* -----------------------------------------
   Trust Area
----------------------------------------- */

.dfmax-testimonial-trust {
  max-width: 1050px;

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

  margin: 50px auto 0;
  padding: 25px 30px;

  background: var(--dfmax-white);

  border: 1px solid var(--dfmax-border);
  border-radius: 12px;

  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
}

.dfmax-trust-item {
  display: flex;
  align-items: center;
  gap: 13px;
}

.dfmax-trust-icon {
  width: 44px;
  height: 44px;

  flex-shrink: 0;

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

  border-radius: 8px;

  color: var(--dfmax-primary);
  background: var(--dfmax-light-blue);

  font-size: 17px;
}

.dfmax-trust-item strong {
  display: block;

  margin-bottom: 3px;

  color: var(--dfmax-text);

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

.dfmax-trust-item span {
  display: block;

  color: var(--dfmax-text-light);

  font-size: 11px;
}

.dfmax-trust-divider {
  width: 1px;
  height: 45px;

  background: var(--dfmax-border);
}

/* -----------------------------------------
   CTA
----------------------------------------- */

.dfmax-testimonial-cta {
  margin-top: 55px;
}

.dfmax-testimonial-cta h3 {
  margin: 0 0 8px;

  color: var(--dfmax-text);

  font-size: 25px;
  font-weight: 800;
}

.dfmax-testimonial-cta p {
  margin: 0 0 20px;

  color: var(--dfmax-text-light);

  font-size: 14px;
}

/* -----------------------------------------
   Responsive
----------------------------------------- */

@media (max-width: 991px) {
  .dfmax-testimonials-section {
    padding: 75px 0;
  }

  .dfmax-testimonials-section .dfmax-section-heading h2 {
    font-size: 34px;
  }

  .dfmax-testimonial-card {
    padding: 25px;
  }

  .dfmax-testimonial-text {
    min-height: auto;
  }

  .dfmax-testimonial-trust {
    flex-wrap: wrap;
    gap: 25px;
  }

  .dfmax-trust-divider {
    display: none;
  }

  .dfmax-trust-item {
    width: calc(50% - 15px);
  }
}

@media (max-width: 767px) {
  .dfmax-testimonials-section {
    padding: 60px 0;
  }

  .dfmax-testimonials-section .dfmax-section-heading {
    margin-bottom: 35px;
  }

  .dfmax-testimonials-section .dfmax-section-heading h2 {
    font-size: 29px;
  }

  .dfmax-testimonials-section .dfmax-section-heading p {
    font-size: 14px;
  }

  .dfmax-testimonial-card {
    padding: 22px;
  }

  .dfmax-testimonial-text {
    font-size: 14px;
    line-height: 1.7;
  }

  .dfmax-testimonial-trust {
    margin-top: 35px;
    padding: 20px;
  }

  .dfmax-trust-item {
    width: 100%;
  }

  .dfmax-testimonial-cta {
    margin-top: 40px;
  }

  .dfmax-testimonial-cta h3 {
    font-size: 21px;
  }
}

@media (max-width: 575px) {
  .dfmax-testimonials-section .dfmax-section-heading h2 {
    font-size: 26px;
  }

  .dfmax-testimonial-top {
    align-items: flex-start;
  }

  .dfmax-testimonial-rating {
    margin-top: 5px;
  }

  .dfmax-testimonial-quote {
    width: 42px;
    height: 42px;

    font-size: 16px;
  }
}
/* ends here */

/* blog section styling starts from here */
.dfmax-blog-section {
  position: relative;
  padding: 60px 0;
  background: var(--dfmax-white);
  overflow: hidden;
}

/* -----------------------------------------
   Blog Heading
----------------------------------------- */

.dfmax-blog-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;

  margin-bottom: 45px;
}

.dfmax-blog-heading > div:first-child {
  max-width: 700px;
}

.dfmax-blog-heading h2 {
  margin: 0 0 14px;

  color: var(--dfmax-text);

  font-size: 38px;
  line-height: 1.25;
  font-weight: 800;
}

.dfmax-blog-heading h2 span {
  color: var(--dfmax-primary);
}

.dfmax-blog-heading p {
  max-width: 650px;

  margin: 0;

  color: var(--dfmax-text-light);

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

/* -----------------------------------------
   Outline Button
----------------------------------------- */

.dfmax-btn-outline {
  color: var(--dfmax-primary);

  background: var(--dfmax-white);

  border: 1px solid var(--dfmax-primary);
}

.dfmax-btn-outline:hover {
  color: var(--dfmax-white);

  background: var(--dfmax-primary);

  transform: translateY(-2px);
}

/* -----------------------------------------
   Blog Card
----------------------------------------- */

.dfmax-blog-card {
  height: 100%;

  overflow: hidden;

  background: var(--dfmax-white);

  border: 1px solid var(--dfmax-border);
  border-radius: 12px;

  transition: var(--dfmax-transition);

  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
}

.dfmax-blog-card:hover {
  transform: translateY(-6px);

  border-color: rgba(0, 156, 197, 0.25);

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

/* -----------------------------------------
   Blog Image
----------------------------------------- */

.dfmax-blog-image {
  position: relative;

  height: 210px;

  overflow: hidden;

  background: linear-gradient(135deg, var(--dfmax-light-blue), #e8f7fb);
}

.dfmax-blog-image-placeholder {
  width: 100%;
  height: 100%;

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

  color: var(--dfmax-primary);

  font-size: 55px;

  transition: var(--dfmax-transition);
}

.dfmax-blog-card:hover .dfmax-blog-image-placeholder {
  transform: scale(1.08);
}

/* -----------------------------------------
   Blog Category
----------------------------------------- */

.dfmax-blog-category {
  position: absolute;

  top: 18px;
  left: 18px;

  display: inline-flex;
  align-items: center;

  padding: 7px 11px;

  color: var(--dfmax-white);

  background: var(--dfmax-primary);

  border-radius: 5px;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
}

/* -----------------------------------------
   Blog Content
----------------------------------------- */

.dfmax-blog-content {
  padding: 25px;
}

.dfmax-blog-meta {
  display: flex;
  align-items: center;
  gap: 18px;

  margin-bottom: 14px;
}

.dfmax-blog-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  color: var(--dfmax-text-light);

  font-size: 11px;
}

.dfmax-blog-meta i {
  color: var(--dfmax-primary);

  font-size: 11px;
}

.dfmax-blog-content h3 {
  min-height: 58px;

  margin: 0 0 12px;

  color: var(--dfmax-text);

  font-size: 19px;
  line-height: 1.45;
  font-weight: 700;

  transition: var(--dfmax-transition);
}

.dfmax-blog-card:hover .dfmax-blog-content h3 {
  color: var(--dfmax-primary);
}

.dfmax-blog-content p {
  min-height: 75px;

  margin: 0 0 20px;

  color: var(--dfmax-text-light);

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

/* -----------------------------------------
   Read More
----------------------------------------- */

.dfmax-blog-read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: var(--dfmax-primary);

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

  text-decoration: none;

  transition: var(--dfmax-transition);
}

.dfmax-blog-read-more i {
  font-size: 11px;

  transition: var(--dfmax-transition);
}

.dfmax-blog-read-more:hover {
  color: var(--dfmax-primary-dark);
}

.dfmax-blog-read-more:hover i {
  transform: translateX(4px);
}

/* -----------------------------------------
   Bottom CTA
----------------------------------------- */

.dfmax-blog-bottom {
  max-width: 1100px;

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

  margin: 50px auto 0;
  padding: 24px 28px;

  background: var(--dfmax-light-blue);

  border: 1px solid rgba(0, 156, 197, 0.15);
  border-radius: 12px;
}

.dfmax-blog-bottom-icon {
  width: 50px;
  height: 50px;

  flex-shrink: 0;

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

  color: var(--dfmax-white);

  background: var(--dfmax-primary);

  border-radius: 10px;

  font-size: 19px;
}

.dfmax-blog-bottom > div:nth-child(2) {
  flex: 1;
}

.dfmax-blog-bottom h4 {
  margin: 0 0 4px;

  color: var(--dfmax-text);

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

.dfmax-blog-bottom p {
  margin: 0;

  color: var(--dfmax-text-light);

  font-size: 12px;
}

/* -----------------------------------------
   Responsive
----------------------------------------- */

@media (max-width: 991px) {
  .dfmax-blog-section {
    padding: 75px 0;
  }

  .dfmax-blog-heading h2 {
    font-size: 34px;
  }

  .dfmax-blog-bottom {
    flex-wrap: wrap;
  }
}

@media (max-width: 767px) {
  .dfmax-blog-section {
    padding: 60px 0;
  }

  .dfmax-blog-heading {
    align-items: flex-start;
    flex-direction: column;

    margin-bottom: 35px;
  }

  .dfmax-blog-heading h2 {
    font-size: 29px;
  }

  .dfmax-blog-heading p {
    font-size: 14px;
  }

  .dfmax-blog-heading-btn {
    width: 100%;
  }

  .dfmax-blog-heading-btn .dfmax-btn {
    width: 100%;
  }

  .dfmax-blog-image {
    height: 190px;
  }

  .dfmax-blog-content {
    padding: 22px;
  }

  .dfmax-blog-content h3 {
    min-height: auto;
  }

  .dfmax-blog-content p {
    min-height: auto;
  }

  .dfmax-blog-bottom {
    align-items: flex-start;

    margin-top: 35px;
    padding: 20px;
  }

  .dfmax-blog-bottom .dfmax-btn {
    width: 100%;
  }
}

@media (max-width: 575px) {
  .dfmax-blog-heading h2 {
    font-size: 26px;
  }

  .dfmax-blog-image {
    height: 175px;
  }

  .dfmax-blog-image-placeholder {
    font-size: 45px;
  }

  .dfmax-blog-meta {
    gap: 12px;
  }

  .dfmax-blog-meta span {
    font-size: 10px;
  }

  .dfmax-blog-content h3 {
    font-size: 17px;
  }

  .dfmax-blog-bottom {
    flex-direction: column;
  }
}
/* ends here */

/* CTA section styling starts from here */
.dfmax-final-cta-section {
  position: relative;

  padding: 60px 0;

  background: var(--dfmax-white);

  overflow: hidden;
}

/* -----------------------------------------
   Main CTA Box
----------------------------------------- */

.dfmax-final-cta-box {
  position: relative;

  overflow: hidden;

  padding: 65px 70px;

  border-radius: 18px;

  background: linear-gradient(
    120deg,
    var(--dfmax-primary-dark) 0%,
    var(--dfmax-primary) 100%
  );

  box-shadow: 0 20px 50px rgba(0, 107, 135, 0.18);
}

/* -----------------------------------------
   Decorative Circles
----------------------------------------- */

.dfmax-final-cta-circle {
  position: absolute;

  border-radius: 50%;

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

  pointer-events: none;
}

.dfmax-final-cta-circle-one {
  width: 420px;
  height: 420px;

  right: -180px;
  top: -220px;
}

.dfmax-final-cta-circle-two {
  width: 300px;
  height: 300px;

  right: 30px;
  bottom: -220px;
}

/* -----------------------------------------
   Content
----------------------------------------- */

.dfmax-final-cta-content {
  position: relative;
  z-index: 2;
}

.dfmax-final-cta-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 16px;

  color: rgba(255, 255, 255, 0.9);

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

  letter-spacing: 1.5px;
}

.dfmax-final-cta-label i {
  font-size: 13px;
}

.dfmax-final-cta-content h2 {
  max-width: 650px;

  margin: 0 0 18px;

  color: var(--dfmax-white);

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

  font-weight: 800;
}

.dfmax-final-cta-content h2 span {
  color: #ffffff;

  opacity: 0.85;
}

.dfmax-final-cta-content > p {
  max-width: 650px;

  margin: 0 0 28px;

  color: rgba(255, 255, 255, 0.82);

  font-size: 15px;
  line-height: 1.75;
}

/* -----------------------------------------
   CTA Buttons
----------------------------------------- */

.dfmax-final-cta-buttons {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 25px;
}

.dfmax-btn-white {
  color: var(--dfmax-primary-dark);

  background: var(--dfmax-white);

  border: 1px solid var(--dfmax-white);
}

.dfmax-btn-white:hover {
  color: var(--dfmax-primary-dark);

  background: #f4f4f4;

  border-color: #f4f4f4;

  transform: translateY(-2px);
}

.dfmax-btn-outline-white {
  color: var(--dfmax-white);

  background: transparent;

  border: 1px solid rgba(255, 255, 255, 0.6);
}

.dfmax-btn-outline-white:hover {
  color: var(--dfmax-primary-dark);

  background: var(--dfmax-white);

  border-color: var(--dfmax-white);

  transform: translateY(-2px);
}

/* -----------------------------------------
   Trust Points
----------------------------------------- */

.dfmax-final-cta-trust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 18px;
}

.dfmax-final-cta-trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  color: rgba(255, 255, 255, 0.85);

  font-size: 11px;
  font-weight: 500;
}

.dfmax-final-cta-trust i {
  color: var(--dfmax-white);

  font-size: 12px;
}

/* -----------------------------------------
   Right Visual
----------------------------------------- */

.dfmax-final-cta-visual {
  position: relative;

  min-height: 330px;

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

/* -----------------------------------------
   Main Icon
----------------------------------------- */

.dfmax-final-cta-main-icon {
  position: relative;
  z-index: 2;

  width: 145px;
  height: 145px;

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

  border-radius: 50%;

  color: var(--dfmax-primary);

  background: var(--dfmax-white);

  font-size: 55px;

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

/* -----------------------------------------
   Floating Cards
----------------------------------------- */

.dfmax-final-floating-card {
  position: absolute;
  z-index: 4;

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

  min-width: 195px;

  padding: 12px 15px;

  background: var(--dfmax-white);

  border-radius: 9px;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.dfmax-floating-card-one {
  top: 28px;
  left: 0;
}

.dfmax-floating-card-two {
  right: 0;
  bottom: 25px;
}

.dfmax-floating-icon {
  width: 38px;
  height: 38px;

  flex-shrink: 0;

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

  border-radius: 7px;

  color: var(--dfmax-primary);

  background: var(--dfmax-light-blue);

  font-size: 14px;
}

.dfmax-final-floating-card strong {
  display: block;

  margin-bottom: 2px;

  color: var(--dfmax-text);

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

.dfmax-final-floating-card span {
  display: block;

  color: var(--dfmax-text-light);

  font-size: 10px;
}

/* -----------------------------------------
   Decorative Rings
----------------------------------------- */

.dfmax-final-ring {
  position: absolute;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.18);
}

.dfmax-final-ring-one {
  width: 220px;
  height: 220px;
}

.dfmax-final-ring-two {
  width: 290px;
  height: 290px;
}

/* -----------------------------------------
   Responsive
----------------------------------------- */

@media (max-width: 1199px) {
  .dfmax-final-cta-box {
    padding: 55px 45px;
  }

  .dfmax-final-cta-content h2 {
    font-size: 38px;
  }

  .dfmax-final-cta-visual {
    min-height: 300px;
  }

  .dfmax-final-floating-card {
    min-width: 175px;
  }
}

@media (max-width: 991px) {
  .dfmax-final-cta-section {
    padding: 70px 0;
  }

  .dfmax-final-cta-box {
    padding: 50px 40px;
  }

  .dfmax-final-cta-content {
    text-align: center;
  }

  .dfmax-final-cta-content h2,
  .dfmax-final-cta-content > p {
    margin-left: auto;
    margin-right: auto;
  }

  .dfmax-final-cta-buttons {
    justify-content: center;
  }

  .dfmax-final-cta-trust {
    justify-content: center;
  }

  .dfmax-final-cta-visual {
    min-height: 300px;

    margin-top: 30px;
  }

  .dfmax-floating-card-one {
    left: 12%;
  }

  .dfmax-floating-card-two {
    right: 12%;
  }
}

@media (max-width: 767px) {
  .dfmax-final-cta-section {
    padding: 60px 0;
  }

  .dfmax-final-cta-box {
    padding: 40px 25px;

    border-radius: 14px;
  }

  .dfmax-final-cta-content h2 {
    font-size: 30px;
  }

  .dfmax-final-cta-content > p {
    font-size: 14px;
  }

  .dfmax-final-cta-buttons {
    flex-direction: column;

    width: 100%;
  }

  .dfmax-final-cta-buttons .dfmax-btn {
    width: 100%;
  }

  .dfmax-final-cta-trust {
    gap: 12px 18px;
  }

  .dfmax-final-cta-visual {
    min-height: 270px;

    margin-top: 20px;
  }

  .dfmax-final-cta-main-icon {
    width: 115px;
    height: 115px;

    font-size: 42px;
  }

  .dfmax-final-ring-one {
    width: 180px;
    height: 180px;
  }

  .dfmax-final-ring-two {
    width: 235px;
    height: 235px;
  }

  .dfmax-floating-card-one {
    top: 15px;
    left: 0;
  }

  .dfmax-floating-card-two {
    right: 0;
    bottom: 15px;
  }

  .dfmax-final-floating-card {
    min-width: 160px;

    padding: 10px;
  }

  .dfmax-floating-icon {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 575px) {
  .dfmax-final-cta-box {
    padding: 35px 20px;
  }

  .dfmax-final-cta-content h2 {
    font-size: 27px;
  }

  .dfmax-final-cta-label {
    font-size: 10px;
  }

  .dfmax-final-cta-trust {
    flex-direction: column;
    align-items: center;
  }

  .dfmax-final-cta-visual {
    min-height: 245px;
  }

  .dfmax-final-cta-main-icon {
    width: 95px;
    height: 95px;

    font-size: 35px;
  }

  .dfmax-final-floating-card {
    min-width: 145px;
  }

  .dfmax-floating-card-one {
    left: -5px;
  }

  .dfmax-floating-card-two {
    right: -5px;
  }

  .dfmax-final-floating-card strong {
    font-size: 11px;
  }

  .dfmax-final-floating-card span {
    font-size: 9px;
  }
}
/* ends here */