/* =========================================================
   modern.css — Dhaka Finance Ltd.
   Modern UI overhaul layer — loaded after style.css
   ========================================================= */

/* ─── CSS Custom Properties ─────────────────────────────── */
:root {
 --primary: #253778;
 --primary-light: #2e4499;
 --primary-dark: #152040;
 --accent: #e8a020;
 --accent-dark: #c98a18;
 --accent-light: #ffd27f;
 --white: #ffffff;
 --light-bg: #f5f7fc;
 --text: #3a3a3a;
 --text-muted: #6c757d;
 --border: #e2e8f0;
 --shadow-sm: 0 2px 8px rgba(37, 55, 120, 0.08);
 --shadow-md: 0 6px 24px rgba(37, 55, 120, 0.12);
 --shadow-lg: 0 16px 48px rgba(37, 55, 120, 0.16);
 --radius-sm: 8px;
 --radius-md: 14px;
 --radius-lg: 22px;
 --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 --font-body: 'Inter', 'Open Sans', sans-serif;
 --font-heading: 'Plus Jakarta Sans', 'Raleway', sans-serif;
}

/* ─── Base ───────────────────────────────────────────────── */
html {
 scroll-behavior: smooth;
}

body {
 font-family: var(--font-body);
 color: var(--text);
 line-height: 1.7;
 -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
 font-family: var(--font-heading);
 font-weight: 700;
 color: var(--primary-dark);
 line-height: 1.25;
}

a {
 transition: color var(--transition);
}

/* ─── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar {
 width: 6px;
}
::-webkit-scrollbar-track {
 background: var(--light-bg);
}
::-webkit-scrollbar-thumb {
 background: var(--primary);
 border-radius: 3px;
}

/* ─── Selection ──────────────────────────────────────────── */
::selection {
 background: var(--accent);
 color: var(--white);
}

/* ─── Header ─────────────────────────────────────────────── */
#header {
 background: var(--white);
 min-height: 80px;
 border-bottom: 3px solid var(--accent);
 box-shadow: 0 2px 20px rgba(37, 55, 120, 0.07);
 transition: all var(--transition);
 padding: 0;
}
#header.header-scrolled {
 background: rgba(255, 255, 255, 0.97) !important;
 backdrop-filter: blur(20px) !important;
 -webkit-backdrop-filter: blur(20px) !important;
 box-shadow: 0 4px 30px rgba(37, 55, 120, 0.14) !important;
 border-bottom-color: var(--accent) !important;
}
#header .logo img {
 max-height: 58px;
}

/* ─── Header Phone ───────────────────────────────────────── */
.header-phone {
 font-size: 13.5px;
 font-weight: 600;
 color: var(--primary);
 white-space: nowrap;
 margin-right: 8px;
 padding: 6px 14px;
 border-radius: 50px;
 border: 1.5px solid rgba(37, 55, 120, 0.15);
 background: rgba(37, 55, 120, 0.04);
 transition: all var(--transition);
 text-decoration: none;
 gap: 6px;
}
.header-phone i {
 color: var(--accent);
 font-size: 14px;
 flex-shrink: 0;
}
.header-phone:hover {
 color: var(--white);
 background: var(--primary);
 border-color: var(--primary);
}
.header-phone:hover i {
 color: var(--white);
}

/* ─── Navbar ─────────────────────────────────────────────── */
.navbar a,
.navbar a:focus {
 font-family: var(--font-body);
 font-size: 14px;
 font-weight: 500;
 letter-spacing: 0.01em;
 color: #2a2a40;
 padding: 12px 0 12px 22px;
}
.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover > a {
 color: var(--primary);
}

.navbar .dropdown ul {
 border-radius: var(--radius-sm);
 border: 1px solid var(--border);
 box-shadow: var(--shadow-md);
 padding: 6px 0;
 left: 0;
 top: calc(100% + 10px);
}
.navbar .dropdown ul li a {
 font-size: 13.5px;
 padding: 9px 18px;
 color: #3a3a4a;
 font-weight: 500;
}
.navbar .dropdown ul li a:hover {
 color: var(--primary);
 background: var(--light-bg);
}
.navbar .dropdown:hover > ul {
 top: 100%;
}

/* ─── Apply Now CTA pill ─────────────────────────────────── */
.nav-apply-btn,
.navbar .nav-apply-btn:focus {
 background: linear-gradient(135deg, var(--accent) 0%, #f5b840 100%) !important;
 color: var(--primary-dark) !important;
 font-weight: 700 !important;
 border-radius: 50px !important;
 padding: 8px 22px !important;
 margin-left: 18px !important;
 font-size: 13px !important;
 letter-spacing: 0.03em !important;
 box-shadow: 0 3px 12px rgba(232, 160, 32, 0.4) !important;
 transition: all var(--transition) !important;
}
.nav-apply-btn:hover {
 transform: translateY(-1px) !important;
 box-shadow: 0 6px 20px rgba(232, 160, 32, 0.5) !important;
}

/* ─── Hero Section ───────────────────────────────────────── */
#hero .carousel-item::before {
 background: linear-gradient(
  135deg,
  rgba(21, 32, 64, 0.88) 0%,
  rgba(37, 55, 120, 0.7) 60%,
  rgba(21, 32, 64, 0.5) 100%
 ) !important;
}

#hero .carousel-container {
 margin: 0;
 padding: 0 20px;
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 88vh;
}
#hero .container {
 text-align: left;
 max-width: 700px;
}

#hero h2 {
 font-family: var(--font-heading);
 font-size: 54px;
 font-weight: 800;
 line-height: 1.12;
 letter-spacing: -0.01em;
 text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
 margin-bottom: 22px;
}
#hero h2 span {
 color: var(--accent);
 position: relative;
}
#hero p {
 font-size: 17px;
 line-height: 1.75;
 color: rgba(255, 255, 255, 0.88);
 margin-bottom: 36px;
 max-width: 600px;
 font-weight: 400;
}
#hero .btn-get-started {
 font-family: var(--font-body);
 font-weight: 600;
 font-size: 15px;
 letter-spacing: 0.03em;
 padding: 15px 36px;
 border-radius: 50px;
 background: var(--accent);
 color: var(--primary-dark);
 box-shadow: 0 6px 24px rgba(232, 160, 32, 0.45);
 transition: all var(--transition);
}
#hero .btn-get-started:hover {
 background: #f5b840;
 transform: translateY(-2px);
 box-shadow: 0 10px 32px rgba(232, 160, 32, 0.55);
}
#hero .carousel-indicators li {
 width: 10px;
 height: 10px;
 border-radius: 50%;
}
#hero .carousel-indicators li.active {
 background: var(--accent);
 box-shadow: 0 0 0 3px rgba(232, 160, 32, 0.3);
}

@media (max-width: 768px) {
 #hero {
  height: 100vh;
 }
 #hero .carousel-container {
  min-height: 100vh;
 }
 #hero .container {
  text-align: center;
 }
 #hero h2 {
  font-size: 32px;
 }
 #hero p {
  font-size: 15px;
 }
}

/* ─── Section General ────────────────────────────────────── */
section {
 padding: 80px 0;
}

/* ─── Section Title Block ────────────────────────────────── */
.section-title-block {
 text-align: center;
 margin-bottom: 52px;
}
.section-title-block .label {
 display: inline-block;
 background: rgba(37, 55, 120, 0.08);
 color: var(--primary);
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 padding: 5px 14px;
 border-radius: 50px;
 margin-bottom: 14px;
 border: 1px solid rgba(37, 55, 120, 0.15);
}
.section-title-block h2 {
 font-size: 34px;
 font-weight: 800;
 color: var(--primary-dark);
 margin-bottom: 14px;
 letter-spacing: -0.01em;
}
.section-title-block p {
 color: var(--text-muted);
 font-size: 16px;
 max-width: 580px;
 margin: 0 auto 18px;
 line-height: 1.7;
}
.section-title-block .divider {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 margin-top: 4px;
}
.section-title-block .divider span {
 width: 60px;
 height: 2px;
 background: linear-gradient(90deg, transparent, var(--accent));
 border-radius: 2px;
}
.section-title-block .divider span:last-child {
 background: linear-gradient(90deg, var(--accent), transparent);
}
.section-title-block .divider i {
 color: var(--accent);
 font-size: 10px;
}

/* ─── Quick Intro Boxes ───────────────────────────────────── */
.intro {
 padding: 40px 0;
 margin-top: -70px;
 position: relative;
 z-index: 10;
}
.intro .box {
 display: block;
 text-decoration: none !important;
 background: var(--white);
 border: 1px solid var(--border);
 border-radius: var(--radius-lg);
 padding: 32px 28px 26px;
 text-align: left;
 margin-bottom: 24px;
 transition: all var(--transition);
 position: relative;
 overflow: hidden;
 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
 z-index: 1;
}

.intro .box:hover {
 transform: translateY(-8px);
 box-shadow: var(--shadow-md);
 border-color: rgba(37, 55, 120, 0.15);
}
.intro .box-icon {
 width: 56px;
 height: 56px;
 border-radius: 14px;
 background: linear-gradient(
  135deg,
  rgba(37, 55, 120, 0.06),
  rgba(232, 160, 32, 0.1)
 );
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all var(--transition);
}
.intro .box-icon i {
 /* font-size: 26px; */
 color: var(--primary);
 transition: color var(--transition);
}

.intro .box h5 {
 font-size: 17px;
 font-weight: 700;
 margin-bottom: 10px;
 color: var(--primary-dark);
 transition: color var(--transition);
}
.intro .box:hover h5 {
 color: var(--primary-light);
}
.intro .box p {
 font-size: 13px;
 color: var(--text-muted);
 margin: 0 0 20px;
 line-height: 1.6;
}
.intro .box .box-link {
 font-size: 13px;
 font-weight: 600;
 color: var(--primary);
 display: inline-flex;
 align-items: center;
 gap: 6px;
 transition: all var(--transition);
 padding: 6px 14px;
 background: rgba(37, 55, 120, 0.05);
 border-radius: 6px;
}
.intro .box:hover .box-link {
 color: var(--white);
 background: var(--primary);
 gap: 10px;
}

/* ─── About Section ───────────────────────────────────────── */
.about {
 background: var(--white);
}
.about img {
 border-radius: var(--radius-lg) !important;
 box-shadow: var(--shadow-lg) !important;
}
/* Floating trust badge */
.about-trust-badge {
 position: absolute;
 bottom: -18px;
 right: 28px;
 background: var(--white);
 border-radius: var(--radius-md);
 padding: 14px 20px;
 box-shadow: var(--shadow-md);
 display: flex;
 align-items: center;
 gap: 16px;
 border: 1px solid var(--border);
 z-index: 2;
}
.about-trust-item {
 text-align: center;
}
.about-trust-item strong {
 display: block;
 font-family: var(--font-heading);
 font-size: 20px;
 font-weight: 800;
 color: var(--primary);
 line-height: 1;
 margin-bottom: 3px;
}
.about-trust-item span {
 font-size: 10.5px;
 font-weight: 600;
 color: var(--text-muted);
 text-transform: uppercase;
 letter-spacing: 0.06em;
 white-space: nowrap;
}
.about-trust-divider {
 width: 1px;
 height: 32px;
 background: var(--border);
 flex-shrink: 0;
}
.about .checkmark-list {
 list-style: none;
 padding: 0;
}
.about .checkmark-list li {
 position: relative;
 padding-left: 28px;
 margin-bottom: 10px;
 font-size: 14.5px;
 color: #454558;
 line-height: 1.6;
}
.about .checkmark-list li::before {
 content: '\F26E';
 font-family: 'bootstrap-icons';
 position: absolute;
 left: 0;
 top: 1px;
 color: var(--accent);
 font-size: 16px;
 font-weight: 700;
}
.btn-learn {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 margin-top: 26px;
 padding: 12px 28px;
 border-radius: 50px;
 background: var(--primary);
 color: var(--white) !important;
 font-size: 14px;
 font-weight: 600;
 letter-spacing: 0.02em;
 transition: all var(--transition);
 box-shadow: 0 4px 16px rgba(37, 55, 120, 0.25);
}
.btn-learn::after {
 content: '\F138';
 font-family: 'bootstrap-icons';
 font-size: 15px;
 transition: transform var(--transition);
}
.btn-learn:hover {
 background: var(--primary-dark);
 color: var(--white) !important;
 transform: translateY(-2px);
 box-shadow: 0 8px 24px rgba(37, 55, 120, 0.35);
}
.btn-learn:hover::after {
 transform: translateX(4px);
}

/* ─── Stats Strip ─────────────────────────────────────────── */
.stats {
 background: linear-gradient(
  135deg,
  var(--primary-dark) 0%,
  var(--primary) 55%,
  #1e3a8a 100%
 );
 padding: 60px 0;
 position: relative;
 overflow: hidden;
}
.stats::before {
 content: '';
 position: absolute;
 top: -50%;
 right: -10%;
 width: 500px;
 height: 500px;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.03);
 pointer-events: none;
}
.stat-item {
 padding: 20px;
 position: relative;
}
.stat-item i {
 font-size: 38px;
 color: var(--accent);
 margin-bottom: 12px;
 display: block;
}
.stat-item .count {
 font-family: var(--font-heading);
 font-size: 42px;
 font-weight: 800;
 color: var(--white);
 line-height: 1;
 margin-bottom: 8px;
 letter-spacing: -0.02em;
}
.stat-item p {
 color: rgba(255, 255, 255, 0.7);
 font-size: 13px;
 font-weight: 500;
 text-transform: uppercase;
 letter-spacing: 0.08em;
 margin: 0;
}
.stat-divider {
 border-left: 1px solid rgba(255, 255, 255, 0.12);
}

/* ─── Services / Icon Boxes ───────────────────────────────── */
.services {
 background: var(--light-bg);
}
.services .icon-box {
 background: var(--white);
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 padding: 22px 20px;
 margin-bottom: 0;
 display: flex;
 align-items: flex-start;
 gap: 16px;
 transition: all var(--transition);
 position: relative;
 overflow: hidden;
 height: 100%;
}
.services .icon-box::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 3px;
 background: linear-gradient(90deg, var(--primary), var(--accent));
 transform: scaleX(0);
 transform-origin: left;
 transition: transform var(--transition);
}
.services .icon-box:hover::before {
 transform: scaleX(1);
}
.services .icon-box:hover {
 transform: translateY(-5px);
 box-shadow: var(--shadow-md);
 border-color: rgba(37, 55, 120, 0.18);
}
.services .icon-box .icon-circle {
 width: 50px;
 height: 50px;
 border-radius: 14px;
 background: linear-gradient(
  135deg,
  rgba(37, 55, 120, 0.09),
  rgba(232, 160, 32, 0.1)
 );
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 transition: all var(--transition);
}
.services .icon-box:hover .icon-circle {
 background: linear-gradient(
  135deg,
  var(--primary) 0%,
  var(--primary-light) 100%
 );
 box-shadow: 0 4px 16px rgba(37, 55, 120, 0.28);
}
.services .icon-box .icon-circle i {
 font-size: 22px;
 color: var(--primary);
 transition: color var(--transition);
}
.services .icon-box:hover .icon-circle i {
 color: var(--white);
}
.services .icon-box .icon-content {
 flex: 1;
}
.services .icon-box h4 {
 font-size: 15px;
 font-weight: 700;
 margin-bottom: 6px;
}
.services .icon-box h4 a {
 color: var(--primary-dark);
 transition: color var(--transition);
}
.services .icon-box h4 a:hover {
 color: var(--accent);
}
.services .icon-box p {
 font-size: 13px;
 color: var(--text-muted);
 margin: 0;
 line-height: 1.65;
}

/* ─── CTA Banner ──────────────────────────────────────────── */
.cta-section {
 background: linear-gradient(
  135deg,
  var(--primary-dark) 0%,
  var(--primary) 50%,
  #1e3a8a 100%
 );
 padding: 80px 0;
 position: relative;
 overflow: hidden;
}
.cta-section::before {
 content: '';
 position: absolute;
 top: -30%;
 left: -5%;
 width: 400px;
 height: 400px;
 border-radius: 50%;
 background: rgba(232, 160, 32, 0.08);
 pointer-events: none;
}
.cta-section::after {
 content: '';
 position: absolute;
 bottom: -30%;
 right: -5%;
 width: 500px;
 height: 500px;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.04);
 pointer-events: none;
}
.cta-section h2 {
 font-size: 36px;
 font-weight: 800;
 color: var(--white);
 margin-bottom: 16px;
 letter-spacing: -0.01em;
}
.cta-section p {
 color: rgba(255, 255, 255, 0.8);
 font-size: 16px;
 margin-bottom: 36px;
 line-height: 1.75;
}
.btn-cta {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 14px 34px;
 border-radius: 50px;
 background: var(--accent);
 color: var(--primary-dark) !important;
 font-weight: 700;
 font-size: 15px;
 letter-spacing: 0.02em;
 transition: all var(--transition);
 box-shadow: 0 6px 24px rgba(232, 160, 32, 0.4);
 margin: 6px;
}
.btn-cta:hover {
 background: #f5b840;
 transform: translateY(-3px);
 box-shadow: 0 10px 32px rgba(232, 160, 32, 0.55);
 color: var(--primary-dark) !important;
}
.btn-cta-outline {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 14px 34px;
 border-radius: 50px;
 background: transparent;
 color: var(--white) !important;
 font-weight: 600;
 font-size: 15px;
 letter-spacing: 0.02em;
 border: 2px solid rgba(255, 255, 255, 0.5);
 transition: all var(--transition);
 margin: 6px;
}
.btn-cta-outline:hover {
 background: rgba(255, 255, 255, 0.1);
 border-color: var(--white);
 color: var(--white) !important;
 transform: translateY(-2px);
}

/* ─── Testimonials ────────────────────────────────────────── */
.testimonials-section {
 background: #f0f3fa;
 position: relative;
 overflow: hidden;
}
.testimonials-section::before {
 content: '\201C';
 font-family: Georgia, serif;
 font-size: 320px;
 line-height: 1;
 color: rgba(37, 55, 120, 0.04);
 position: absolute;
 top: -40px;
 left: -20px;
 pointer-events: none;
 font-weight: 900;
}
.testi-card {
 background: var(--white);
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 padding: 36px 32px;
 margin-bottom: 24px;
 position: relative;
 transition: all var(--transition);
 overflow: hidden;
}
.testi-card::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 3px;
 background: linear-gradient(90deg, var(--primary), var(--accent));
 transform: scaleX(0);
 transform-origin: left;
 transition: transform var(--transition);
}
.testi-card:hover::before {
 transform: scaleX(1);
}
.testi-card:hover {
 box-shadow: var(--shadow-md);
 transform: translateY(-4px);
 border-color: rgba(37, 55, 120, 0.12);
}
.testi-card .quote-icon {
 font-size: 72px;
 line-height: 0.8;
 color: var(--accent);
 opacity: 0.18;
 font-family: Georgia, serif;
 position: absolute;
 top: 16px;
 right: 24px;
}
.testi-card .stars {
 color: var(--accent);
 font-size: 14px;
 margin-bottom: 16px;
 letter-spacing: 2px;
}
.testi-card p {
 font-size: 14.5px;
 line-height: 1.75;
 color: #555570;
 font-style: italic;
 margin-bottom: 22px;
}
.testi-card .testi-author {
 display: flex;
 align-items: center;
 gap: 14px;
 padding-top: 18px;
 border-top: 1px solid var(--border);
}
.testi-card .testi-author img {
 width: 48px;
 height: 48px;
 border-radius: 50%;
 object-fit: cover;
 border: 2px solid var(--border);
}
.testi-card .testi-author .initials {
 width: 48px;
 height: 48px;
 border-radius: 50%;
 background: linear-gradient(135deg, var(--primary), var(--primary-light));
 color: var(--white);
 font-size: 18px;
 font-weight: 700;
 display: flex;
 align-items: center;
 justify-content: center;
 font-family: var(--font-heading);
}
.testi-card .testi-author strong {
 display: block;
 font-size: 14px;
 font-weight: 700;
 color: var(--primary-dark);
}
.testi-card .testi-author span {
 font-size: 12px;
 color: var(--text-muted);
}

/* ─── Leadership / Board ──────────────────────────────────── */
.leadership-section {
 background: var(--white);
}
.member-card {
 background: var(--white);
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 padding: 36px 24px 28px;
 text-align: center;
 margin-bottom: 24px;
 transition: all var(--transition);
 position: relative;
 overflow: hidden;
}
.member-card::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 height: 3px;
 background: linear-gradient(90deg, var(--primary), var(--accent));
 transform: scaleX(0);
 transform-origin: center;
 transition: transform var(--transition);
}
.member-card:hover::after {
 transform: scaleX(1);
}
.member-card:hover {
 transform: translateY(-6px);
 box-shadow: var(--shadow-md);
 border-color: rgba(37, 55, 120, 0.15);
}
.member-card .avatar {
 width: 88px;
 height: 88px;
 border-radius: 50%;
 background: linear-gradient(135deg, var(--primary), var(--primary-light));
 color: var(--white);
 font-size: 28px;
 font-weight: 800;
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 0 auto 18px;
 font-family: var(--font-heading);
 border: 3px solid var(--accent);
 box-shadow: 0 4px 16px rgba(37, 55, 120, 0.2);
}
.member-card h5 {
 font-size: 16px;
 font-weight: 700;
 margin-bottom: 4px;
 color: var(--primary-dark);
}
.member-card .role {
 font-size: 12.5px;
 color: var(--accent);
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.06em;
 margin-bottom: 12px;
}
.member-card p {
 font-size: 13px;
 color: var(--text-muted);
 margin: 0;
 line-height: 1.6;
}

/* ─── News Cards ──────────────────────────────────────────── */
.news .news-card {
 background: var(--white);
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 overflow: hidden;
 margin-bottom: 24px;
 transition: all var(--transition);
}
.news .news-card:hover {
 transform: translateY(-6px);
 box-shadow: var(--shadow-md);
 border-color: rgba(37, 55, 120, 0.15);
}
.news .news-card .badge {
 font-size: 11px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.06em;
 background: rgba(37, 55, 120, 0.08) !important;
 color: var(--primary) !important;
 padding: 4px 10px;
 border-radius: 50px;
}
.news .news-card h5 {
 font-size: 16px;
 font-weight: 700;
 line-height: 1.4;
 margin-bottom: 10px;
}
.news .news-card h5 a {
 color: var(--primary-dark);
 transition: color var(--transition);
}
.news .news-card h5 a:hover {
 color: var(--accent);
}
.news .news-card p {
 font-size: 13.5px;
 color: var(--text-muted);
 line-height: 1.65;
}
.news .news-card .meta {
 font-size: 12px;
 color: var(--text-muted);
 font-weight: 500;
}
.news .news-card .meta i {
 color: var(--accent);
}
.news .news-card .news-read-more {
 color: var(--primary);
 font-size: 13px;
 font-weight: 600;
 display: inline-flex;
 align-items: center;
 gap: 5px;
 transition: all var(--transition);
}
.news .news-card .news-read-more:hover {
 color: var(--accent);
 gap: 9px;
}

/* ─── Contact Section ─────────────────────────────────────── */
.contact-section {
 background: var(--light-bg);
}
.contact-section .php-email-form input,
.contact-section .php-email-form textarea,
.contact-section .php-email-form select {
 border-radius: var(--radius-sm) !important;
 border: 1.5px solid var(--border) !important;
 font-size: 14px;
 padding: 12px 16px;
 transition:
  border-color var(--transition),
  box-shadow var(--transition);
 background: var(--white);
}
.contact-section .php-email-form input:focus,
.contact-section .php-email-form textarea:focus {
 border-color: var(--primary) !important;
 box-shadow: 0 0 0 3px rgba(37, 55, 120, 0.1) !important;
 outline: none;
}
.contact-section .php-email-form button[type='submit'] {
 background: linear-gradient(
  135deg,
  var(--primary) 0%,
  var(--primary-light) 100%
 );
 color: var(--white);
 border: none;
 border-radius: 50px;
 padding: 13px 36px;
 font-size: 15px;
 font-weight: 600;
 letter-spacing: 0.02em;
 cursor: pointer;
 transition: all var(--transition);
 box-shadow: 0 4px 16px rgba(37, 55, 120, 0.3);
}
.contact-section .php-email-form button[type='submit']:hover {
 transform: translateY(-2px);
 box-shadow: 0 8px 24px rgba(37, 55, 120, 0.4);
}

/* ─── Footer ──────────────────────────────────────────────── */
#footer {
 background: #0f1e3d;
 color: rgba(255, 255, 255, 0.75);
 font-size: 14px;
}
#footer .footer-top {
 padding: 70px 0 50px;
 border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* Brand column */
#footer .footer-brand p {
 color: rgba(255, 255, 255, 0.6);
 font-size: 13.5px;
 line-height: 1.75;
 max-width: 340px;
}
#footer .footer-contact p {
 font-size: 13px;
 color: rgba(255, 255, 255, 0.65);
 margin-bottom: 8px;
 line-height: 1.6;
 display: flex;
 gap: 10px;
}
#footer .footer-contact p i {
 color: var(--accent);
 font-size: 14px;
 flex-shrink: 0;
 margin-top: 2px;
}
#footer .footer-contact a {
 color: rgba(255, 255, 255, 0.65);
}
#footer .footer-contact a:hover {
 color: var(--accent);
}

/* Social icons */
#footer .footer-social a {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 38px;
 height: 38px;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.08);
 color: rgba(255, 255, 255, 0.7);
 font-size: 16px;
 margin-right: 6px;
 transition: all var(--transition);
 border: 1px solid rgba(255, 255, 255, 0.1);
}
#footer .footer-social a:hover {
 background: var(--accent);
 color: var(--primary-dark);
 border-color: var(--accent);
 transform: translateY(-3px);
 box-shadow: 0 6px 16px rgba(232, 160, 32, 0.35);
}

/* Widget headings */
#footer .footer-heading {
 font-family: var(--font-heading);
 font-size: 14px;
 font-weight: 700;
 color: var(--white);
 text-transform: uppercase;
 letter-spacing: 0.1em;
 margin-bottom: 20px;
 padding-bottom: 12px;
 position: relative;
}
#footer .footer-heading::after {
 content: '';
 position: absolute;
 left: 0;
 bottom: 0;
 width: 30px;
 height: 2px;
 background: var(--accent);
 border-radius: 2px;
}

/* Links */
#footer .footer-links {
 list-style: none;
 padding: 0;
 margin: 0;
}
#footer .footer-links li {
 padding: 6px 0;
}
#footer .footer-links li a {
 color: rgba(255, 255, 255, 0.6);
 font-size: 13.5px;
 display: inline-flex;
 align-items: center;
 gap: 8px;
 transition: all var(--transition);
}
#footer .footer-links li a::before {
 content: '\F285';
 font-family: 'bootstrap-icons';
 font-size: 11px;
 color: var(--accent);
 flex-shrink: 0;
}
#footer .footer-links li a:hover {
 color: var(--white);
 gap: 12px;
}

/* Newsletter */
#footer .footer-newsletter-text {
 font-size: 13px;
 color: rgba(255, 255, 255, 0.6);
 margin-bottom: 16px;
 line-height: 1.7;
}
#footer .footer-newsletter-form .input-group {
 border-radius: 50px;
 overflow: hidden;
 border: 1.5px solid rgba(255, 255, 255, 0.15);
 background: rgba(255, 255, 255, 0.06);
}
#footer .footer-newsletter-form .form-control {
 background: transparent;
 border: none;
 color: var(--white);
 font-size: 13.5px;
 padding: 12px 18px;
 box-shadow: none;
}
#footer .footer-newsletter-form .form-control::placeholder {
 color: rgba(255, 255, 255, 0.4);
}
#footer .footer-newsletter-form .form-control:focus {
 background: transparent;
 box-shadow: none;
 border: none;
}
#footer .footer-newsletter-form .btn {
 background: var(--accent);
 color: var(--primary-dark);
 font-weight: 700;
 font-size: 13px;
 padding: 12px 22px;
 border-radius: 0 50px 50px 0;
 border: none;
 white-space: nowrap;
 transition: background var(--transition);
}
#footer .footer-newsletter-form .btn:hover {
 background: #f5b840;
}
#footer .footer-trust {
 font-size: 12px;
 color: rgba(255, 255, 255, 0.4);
 margin-bottom: 12px;
}
#footer .footer-trust i {
 color: var(--accent);
}

/* Badges */
#footer .footer-badges {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
}
#footer .footer-badge {
 display: inline-flex;
 align-items: center;
 font-size: 11px;
 font-weight: 600;
 color: rgba(255, 255, 255, 0.65);
 background: rgba(255, 255, 255, 0.06);
 border: 1px solid rgba(255, 255, 255, 0.1);
 border-radius: 50px;
 padding: 4px 12px;
 letter-spacing: 0.02em;
}
#footer .footer-badge i {
 color: var(--accent);
 font-size: 12px;
}

/* Footer bottom bar */
#footer .footer-bottom {
 padding: 20px 0;
 background: rgba(0, 0, 0, 0.2);
}
#footer .footer-bottom p {
 font-size: 13px;
 color: rgba(255, 255, 255, 0.45);
 margin: 0;
}
#footer .footer-bottom strong {
 color: rgba(255, 255, 255, 0.7);
}
#footer .footer-bottom-links {
 list-style: none;
 padding: 0;
 margin: 0;
 display: inline-flex;
 gap: 20px;
 flex-wrap: wrap;
 justify-content: flex-end;
}
#footer .footer-bottom-links li a {
 font-size: 12.5px;
 color: rgba(255, 255, 255, 0.4);
 transition: color var(--transition);
}
#footer .footer-bottom-links li a:hover {
 color: var(--accent);
}

@media (max-width: 767px) {
 #footer .footer-top {
  padding: 50px 0 30px;
 }
 #footer .footer-brand p {
  max-width: 100%;
 }
 #footer .footer-bottom-links {
  justify-content: center;
  margin-top: 8px;
 }
 #footer .footer-bottom p {
  text-align: center;
 }
}

/* ─── Back to Top ─────────────────────────────────────────── */
.back-to-top {
 background: var(--primary) !important;
 border-radius: 50% !important;
 width: 44px !important;
 height: 44px !important;
 box-shadow: 0 4px 16px rgba(37, 55, 120, 0.35) !important;
 transition: all var(--transition) !important;
}
.back-to-top:hover {
 background: var(--accent) !important;
 transform: translateY(-3px) !important;
 box-shadow: 0 8px 24px rgba(232, 160, 32, 0.4) !important;
}

/* ─── Breadcrumbs ─────────────────────────────────────────── */
.breadcrumbs {
 background: linear-gradient(
  135deg,
  var(--primary-dark) 0%,
  var(--primary) 100%
 );
 padding: 22px 0;
 margin-top: 0 !important;
}
.breadcrumbs h2 {
 color: var(--white);
 font-size: 26px;
 font-weight: 700;
}
.breadcrumbs ol li,
.breadcrumbs ol li a {
 color: rgba(255, 255, 255, 0.75);
}
.breadcrumbs ol li + li::before {
 color: rgba(255, 255, 255, 0.45);
}
.breadcrumbs ol li:last-child {
 color: var(--accent);
}

/* ─── Page Inner Content Sections ────────────────────────── */
.value-card,
.principle-card,
.strategy-card,
.award-callout {
 border-radius: var(--radius-md) !important;
 border: 1px solid var(--border) !important;
 transition: all var(--transition) !important;
 overflow: hidden;
}
.value-card:hover,
.principle-card:hover,
.strategy-card:hover {
 transform: translateY(-6px) !important;
 box-shadow: var(--shadow-md) !important;
 border-color: rgba(37, 55, 120, 0.2) !important;
}
.award-callout {
 background: linear-gradient(
  135deg,
  var(--light-bg) 0%,
  rgba(37, 55, 120, 0.04) 100%
 ) !important;
 border-left: 4px solid var(--accent) !important;
}
.award-callout:hover {
 transform: none !important;
}

/* ─── Timeline ────────────────────────────────────────────── */
.timeline .timeline-item {
 position: relative;
 padding-left: 48px;
 padding-bottom: 40px;
}


.timeline .timeline-dot {
 position: absolute;
 left: 0;
 top: 8px;
 width: 30px;
 height: 30px;
 border-radius: 50%;
 background: var(--accent);
 border: 3px solid var(--white);
 box-shadow:
  0 0 0 2px var(--accent),
  var(--shadow-sm);
 display: flex;
 align-items: center;
 justify-content: center;
}
.timeline .timeline-dot i {
 color: var(--white);
 font-size: 12px;
}
.timeline .timeline-year {
 font-size: 11px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.1em;
 color: var(--accent);
 margin-bottom: 4px;
}
.timeline .timeline-content {
 background: var(--white);
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 padding: 22px 26px;
 transition: all var(--transition);
}
.timeline .timeline-content:hover {
 box-shadow: var(--shadow-sm);
 border-color: rgba(37, 55, 120, 0.15);
}
.timeline .timeline-content h5 {
 font-size: 16px;
 font-weight: 700;
 margin-bottom: 6px;
 color: var(--primary-dark);
}
.timeline .timeline-content p {
 font-size: 13.5px;
 color: var(--text-muted);
 margin: 0;
 line-height: 1.65;
}

/* ─── Forms (inner pages) ─────────────────────────────────── */
.form-control,
.form-select {
 border: 1.5px solid var(--border);
 border-radius: var(--radius-sm);
 padding: 11px 14px;
 font-size: 14px;
 transition: all var(--transition);
}
.form-control:focus,
.form-select:focus {
 border-color: var(--primary);
 box-shadow: 0 0 0 3px rgba(37, 55, 120, 0.1);
}

/* ─── Buttons global ──────────────────────────────────────── */
.btn-primary {
 background: linear-gradient(
  135deg,
  var(--primary) 0%,
  var(--primary-light) 100%
 );
 border: none;
 border-radius: 50px;
 padding: 11px 28px;
 font-weight: 600;
 font-size: 14px;
 letter-spacing: 0.02em;
 box-shadow: 0 4px 14px rgba(37, 55, 120, 0.3);
 transition: all var(--transition);
}
.btn-primary:hover {
 transform: translateY(-2px);
 box-shadow: 0 8px 22px rgba(37, 55, 120, 0.4);
 background: linear-gradient(
  135deg,
  var(--primary-light) 0%,
  var(--primary) 100%
 );
}

/* ─── Scroll Reveal Animations ────────────────────────────── */
@keyframes fadeInUp {
 from {
  opacity: 0;
  transform: translateY(30px);
 }
 to {
  opacity: 1;
  transform: translateY(0);
 }
}
@keyframes fadeInLeft {
 from {
  opacity: 0;
  transform: translateX(-30px);
 }
 to {
  opacity: 1;
  transform: translateX(0);
 }
}
@keyframes fadeInRight {
 from {
  opacity: 0;
  transform: translateX(30px);
 }
 to {
  opacity: 1;
  transform: translateX(0);
 }
}
@keyframes counterPulse {
 0% {
  transform: scale(1);
 }
 50% {
  transform: scale(1.04);
 }
 100% {
  transform: scale(1);
 }
}
.animate-counter-done {
 animation: counterPulse 0.4s ease;
}

/* ─── Stat Counter visibility ─────────────────────────────── */
.stat-item .count {
 transition: color 0.3s;
}

/* ─── Mobile Navigation ───────────────────────────────────── */
@media (max-width: 991px) {
 .navbar-mobile ul {
  border-radius: var(--radius-md);
  overflow: hidden;
 }
 .navbar-mobile a,
 .navbar-mobile a:focus {
  font-size: 14px;
  font-weight: 500;
 }
 .mobile-nav-toggle {
  color: var(--primary);
  font-size: 26px;
 }
}

/* ─── Utility classes ─────────────────────────────────────── */
.text-gold {
 color: var(--accent);
}
.text-navy {
 color: var(--primary);
}
.bg-navy {
 background: var(--primary);
}
.bg-gold {
 background: var(--accent);
}
.bg-light-blue {
 background: var(--light-bg);
}
.rounded-pill-lg {
 border-radius: 50px !important;
}
.shadow-fancy {
 box-shadow: var(--shadow-lg) !important;
}

/* ─── Responsive Tweaks ───────────────────────────────────── */
@media (max-width: 768px) {
 .section-title-block h2 {
  font-size: 26px;
 }
 .cta-section h2 {
  font-size: 26px;
 }
 .stat-divider {
  border-left: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
 }
 .stats .stat-item {
  padding: 16px 8px;
 }
 .stats .stat-item .count {
  font-size: 34px;
 }
 section {
  padding: 60px 0;
 }
}

@media (max-width: 576px) {
 #hero h2 {
  font-size: 28px;
 }
 .btn-cta,
 .btn-cta-outline {
  padding: 12px 24px;
  font-size: 14px;
 }
 .testi-card,
 .member-card,
 .news .news-card {
  padding: 24px 20px;
 }
}

/* ─── Hero Badge ─────────────────────────────────────────── */
.hero-badge {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 background: rgba(232, 160, 32, 0.15);
 border: 1px solid rgba(232, 160, 32, 0.45);
 color: #ffd27f;
 font-size: 11.5px;
 font-weight: 700;
 letter-spacing: 0.07em;
 text-transform: uppercase;
 padding: 7px 18px;
 border-radius: 50px;
 margin-bottom: 22px;
 backdrop-filter: blur(4px);
}

/* ─── Hero Dual CTA ──────────────────────────────────────── */
.hero-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 14px;
 align-items: center;
 margin-top: 8px;
}
#hero .btn-get-started-outline {
 font-family: var(--font-body);
 font-weight: 600;
 font-size: 15px;
 letter-spacing: 0.03em;
 padding: 8px 32px;
 border-radius: 50px;
 background: transparent;
 color: var(--white);
 border: 2px solid rgba(255, 255, 255, 0.5);
 transition: all var(--transition);
 display: inline-flex;
 align-items: center;
 gap: 8px;
}
#hero .btn-get-started-outline:hover {
 background: rgba(255, 255, 255, 0.12);
 border-color: var(--white);
 color: var(--white);
}
@media (max-width: 768px) {
 .hero-actions {
  justify-content: center;
 }
 .hero-badge {
  font-size: 10.5px;
  padding: 6px 14px;
 }
}

/* ─── News: date-badge & read-link ───────────────────────── */
.news .news-card .date-badge {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 font-size: 11.5px;
 font-weight: 600;
 color: var(--primary);
 background: rgba(37, 55, 120, 0.07);
 padding: 4px 12px;
 border-radius: 50px;
 margin-bottom: 10px;
 letter-spacing: 0.02em;
}
.news .news-card .date-badge i {
 color: var(--accent);
}
.news .news-card .read-link {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 font-size: 13px;
 font-weight: 600;
 color: var(--primary);
 transition: all var(--transition);
 margin-top: 14px;
}
.news .news-card .read-link:hover {
 color: var(--accent);
 gap: 9px;
}
.news .news-card .img-wrap {
 overflow: hidden;
 height: 200px;
}
.news .news-card .img-wrap img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.45s var(--transition);
}
.news .news-card:hover .img-wrap img {
 transform: scale(1.06);
}
.news .news-card .card-body {
 padding: 22px 24px;
}

/* ─── Contact: info-card, form, submit ───────────────────── */
.contact-section .info-card {
 background: var(--white);
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 padding: 20px 22px;
 margin-bottom: 16px;
 display: flex;
 align-items: flex-start;
 gap: 16px;
 transition: all var(--transition);
}
.contact-section .info-card:hover {
 border-color: rgba(37, 55, 120, 0.2);
 box-shadow: var(--shadow-sm);
}
.contact-section .info-card > i {
 width: 44px;
 height: 44px;
 border-radius: 50%;
 background: rgba(37, 55, 120, 0.07);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 18px;
 color: var(--primary);
 flex-shrink: 0;
 margin-top: 2px;
}
.contact-section .info-card h5 {
 font-size: 12px;
 font-weight: 700;
 color: var(--primary-dark);
 margin-bottom: 4px;
 text-transform: uppercase;
 letter-spacing: 0.08em;
}
.contact-section .info-card p {
 font-size: 13.5px;
 color: var(--text-muted);
 margin: 0;
 line-height: 1.65;
}
.contact-section .contact-form {
 background: var(--white);
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 padding: 36px 32px;
 box-shadow: var(--shadow-sm);
}
.contact-section .btn-submit {
 background: linear-gradient(
  135deg,
  var(--primary) 0%,
  var(--primary-light) 100%
 );
 color: var(--white);
 border: none;
 border-radius: 50px;
 padding: 13px 40px;
 font-size: 15px;
 font-weight: 600;
 letter-spacing: 0.02em;
 cursor: pointer;
 transition: all var(--transition);
 box-shadow: 0 4px 16px rgba(37, 55, 120, 0.28);
}
.contact-section .btn-submit:hover {
 transform: translateY(-2px);
 box-shadow: 0 8px 24px rgba(37, 55, 120, 0.38);
}

.about .box-hover {
 transition: all var(--transition);
}
.about .box-hover:hover {
 transform: translateY(-4px);
 box-shadow: var(--shadow-sm);
 background-color: var(--white) !important;
 border-color: rgba(37, 55, 120, 0.1) !important;
}
.about-img-wrapper .bg-primary {
 background-color: var(--primary) !important;
}
.about-img-wrapper .bg-accent {
 background-color: var(--accent) !important;
}

.services .icon-box .bi-arrow-right {
 transition: transform var(--transition);
}
.services .icon-box:hover .bi-arrow-right {
 transform: translateX(4px);
 color: var(--accent) !important;
}
.pro-card {
 transition: all 0.3s ease;
}
.pro-card:hover {
 transform: translateY(-8px);
 box-shadow: 0 15px 30px rgba(0, 0, 0, 0.06) !important;
}
.pro-arrow {
 transition: transform 0.3s ease;
}
.pro-card:hover .pro-arrow {
 transform: translateX(4px);
}

.financial-freedom {
 position: relative;
}

.financial-freedom .lead {
 font-size: 1.08rem;
 line-height: 1.7;
}

.freedom-feature {
 display: flex;
 gap: 14px;
 align-items: flex-start;
 padding: 18px;
 background: rgba(255, 255, 255, 0.88);
 border: 1px solid rgba(37, 55, 120, 0.08);
 border-radius: 18px;
 transition: all var(--transition);
}

.freedom-feature:hover {
 transform: translateY(-4px);
 background: var(--white);
 box-shadow: 0 14px 30px rgba(13, 22, 44, 0.08);
 border-color: rgba(37, 55, 120, 0.14);
}

.freedom-feature-icon {
 width: 48px;
 height: 48px;
 border-radius: 14px;
 background: rgba(37, 55, 120, 0.08);
 color: var(--primary);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 font-size: 20px;
}

.freedom-feature h6 {
 margin-bottom: 6px;
 font-size: 15px;
 font-weight: 700;
 color: #1f2937;
}

.freedom-feature p {
 margin: 0;
 font-size: 13.5px;
 line-height: 1.65;
 color: #667085;
}

.freedom-note {
 display: flex;
 flex-direction: column;
 gap: 4px;
 max-width: 360px;
}

.freedom-note strong {
 font-size: 13px;
 font-weight: 700;
 color: #1f2937;
 text-transform: uppercase;
 letter-spacing: 0.06em;
}

.freedom-note span {
 font-size: 13.5px;
 line-height: 1.6;
 color: #667085;
}

.freedom-visual {
 padding: 18px;
}

.freedom-visual-accent {
 position: absolute;
 inset: 0;
 border-radius: 28px;
 background: linear-gradient(
  135deg,
  rgba(37, 55, 120, 0.08),
  rgba(210, 171, 103, 0.1)
 );
 transform: translate(16px, 16px);
}

.freedom-visual img {
 border: 1px solid rgba(255, 255, 255, 0.65);
}

.freedom-panel {
 position: absolute;
 left: -15px;
 bottom: -50px;
 width: min(360px, calc(100% - 24px));
 padding: 22px;
 border-radius: 22px;
 background: rgba(255, 255, 255, 0.96);
 border: 1px solid rgba(37, 55, 120, 0.08);
 box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

.freedom-panel-label {
 display: inline-block;
 margin-bottom: 10px;
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--primary);
}

.freedom-panel h5 {
 margin-bottom: 14px;
 font-size: 1.1rem;
 font-weight: 700;
 color: #111827;
}

.freedom-list {
 list-style: none;
 padding: 0;
 margin: 0 0 18px;
}

.freedom-list li {
 position: relative;
 padding-left: 22px;
 margin-bottom: 10px;
 font-size: 13.5px;
 line-height: 1.6;
 color: #4b5563;
}

.freedom-list li::before {
 content: '';
 position: absolute;
 left: 0;
 top: 8px;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--accent);
}

.freedom-metrics {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 12px;
}

.freedom-metrics div {
 padding-top: 14px;
 border-top: 1px solid rgba(37, 55, 120, 0.08);
}

.freedom-metrics strong {
 display: block;
 font-size: 1.3rem;
 font-weight: 800;
 color: #111827;
}

.freedom-metrics span {
 display: block;
 margin-top: 3px;
 font-size: 12.5px;
 line-height: 1.5;
 color: #667085;
}

@media (max-width: 991.98px) {
 .freedom-panel {
  position: relative;
  left: auto;
  bottom: auto;
  width: 100%;
  margin-top: 18px;
 }

 .freedom-visual-accent {
  transform: translate(10px, 10px);
 }
}

@media (max-width: 575.98px) {
 .freedom-feature {
  padding: 16px;
 }

 .freedom-metrics {
  grid-template-columns: 1fr;
 }
}

.profile-hero {
 background: linear-gradient(
  180deg,
  rgba(37, 55, 120, 0.03) 0%,
  rgba(255, 255, 255, 0) 100%
 );
}

.profile-signal-card,
.profile-side-card,
.profile-service-card,
.profile-group-card,
.profile-closing-note {
 background: var(--white);
 border: 1px solid rgba(37, 55, 120, 0.08);
 border-radius: 22px;
 box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
}

.profile-signal-card {
 padding: 20px 22px;
}

.profile-signal-card strong {
 display: block;
 margin-bottom: 6px;
 color: #111827;
 font-size: 1.05rem;
 font-weight: 800;
}

.profile-signal-card span {
 display: block;
 color: #667085;
 font-size: 13.5px;
 line-height: 1.6;
}

.profile-inline-note {
 display: flex;
 flex-direction: column;
 gap: 4px;
 max-width: 360px;
}

.profile-inline-note strong {
 color: #1f2937;
 font-size: 13px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.06em;
}

.profile-inline-note span {
 color: #667085;
 font-size: 13.5px;
 line-height: 1.6;
}

.profile-hero-visual {
 padding: 18px;
}

.profile-hero-accent {
 position: absolute;
 inset: 0;
 border-radius: 28px;
 background: linear-gradient(
  135deg,
  rgba(37, 55, 120, 0.08),
  rgba(232, 160, 32, 0.1)
 );
 transform: translate(16px, 16px);
}

.profile-hero-panel {
 position: absolute;
 right: 0;
 bottom: -14px;
 width: min(360px, calc(100% - 24px));
 padding: 22px;
 background: rgba(255, 255, 255, 0.96);
 border: 1px solid rgba(37, 55, 120, 0.08);
 border-radius: 22px;
 box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

.profile-panel-label,
.profile-group-tag {
 display: inline-block;
 font-size: 11px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.08em;
}

.profile-panel-label {
 margin-bottom: 10px;
 color: var(--primary);
}

.profile-hero-panel h5,
.profile-side-card h5,
.profile-group-card h5 {
 margin-bottom: 12px;
 color: #111827;
 font-size: 1.1rem;
 font-weight: 700;
}

.profile-panel-list {
 list-style: none;
 padding: 0;
 margin: 0;
}

.profile-panel-list li {
 position: relative;
 padding-left: 22px;
 margin-bottom: 10px;
 color: #4b5563;
 font-size: 13.5px;
 line-height: 1.6;
}

.profile-panel-list li::before {
 content: '';
 position: absolute;
 left: 0;
 top: 8px;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--accent);
}

.profile-side-card {
 padding: 28px;
}

.profile-side-card p {
 margin: 0;
 color: #667085;
 font-size: 14px;
 line-height: 1.7;
}

.profile-service-card {
 padding: 26px 24px;
 transition: all var(--transition);
}

.profile-service-card:hover,
.profile-group-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
 border-color: rgba(37, 55, 120, 0.14);
}

.profile-service-icon {
 width: 54px;
 height: 54px;
 margin-bottom: 18px;
 border-radius: 16px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: linear-gradient(
  135deg,
  rgba(37, 55, 120, 0.1),
  rgba(232, 160, 32, 0.12)
 );
 color: var(--primary);
 font-size: 22px;
}

.profile-service-card h4 {
 margin-bottom: 10px;
 color: #111827;
 font-size: 1.05rem;
 font-weight: 700;
}

.profile-service-card p,
.profile-group-card p {
 margin: 0;
 color: #667085;
 font-size: 14px;
 line-height: 1.7;
}

.profile-highlight-card {
 margin-top: 8px;
}

.profile-group-card {
 padding: 24px;
 transition: all var(--transition);
}

.profile-group-tag {
 margin-bottom: 12px;
 color: var(--primary);
 background: rgba(37, 55, 120, 0.08);
 padding: 7px 10px;
 border-radius: 999px;
}

.profile-closing-note {
 padding: 28px;
 background: linear-gradient(
  135deg,
  rgba(37, 55, 120, 0.04),
  rgba(232, 160, 32, 0.06)
 );
}

.profile-closing-note p {
 color: #344054;
 font-size: 15px;
 line-height: 1.85;
}

@media (max-width: 991.98px) {
 .profile-hero-panel {
  position: relative;
  right: auto;
  bottom: auto;
  width: 100%;
  margin-top: 18px;
 }

 .profile-hero-accent {
  transform: translate(10px, 10px);
 }
}

@media (max-width: 575.98px) {
 .profile-service-card,
 .profile-group-card,
 .profile-side-card,
 .profile-closing-note {
  padding: 20px;
 }

 .profile-signal-card {
  padding: 18px;
 }
}

.vmv-page {
 background: linear-gradient(
  180deg,
  rgba(37, 55, 120, 0.03) 0%,
  rgba(255, 255, 255, 0) 100%
 );
}

.vmv-intro-card,
.vmv-vision-card,
.vmv-mission-card,
.vmv-value-card {
 background: var(--white);
 border: 1px solid rgba(37, 55, 120, 0.08);
 box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}

.vmv-intro-card {
 padding: 28px;
 border-radius: 24px;
}

.vmv-tag {
 display: inline-block;
 margin-bottom: 12px;
 padding: 7px 11px;
 border-radius: 999px;
 background: rgba(37, 55, 120, 0.08);
 color: var(--primary);
 font-size: 11px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.08em;
}

.vmv-intro-card h5 {
 margin-bottom: 14px;
 color: #111827;
 font-size: 1.1rem;
 font-weight: 700;
}

.vmv-mini-list {
 list-style: none;
 padding: 0;
 margin: 0;
}

.vmv-mini-list li {
 position: relative;
 padding-left: 22px;
 margin-bottom: 10px;
 color: #4b5563;
 font-size: 13.5px;
 line-height: 1.6;
}

.vmv-mini-list li::before {
 content: '';
 position: absolute;
 left: 0;
 top: 8px;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--accent);
}

.vmv-vision-card {
 position: relative;
 padding: 36px 34px 30px;
 border-radius: 24px;
 background: linear-gradient(
  135deg,
  rgba(37, 55, 120, 0.04),
  rgba(255, 255, 255, 1)
 );
}

.vmv-quote-mark {
 position: absolute;
 left: 24px;
 top: 10px;
 color: rgba(37, 55, 120, 0.12);
 font-size: 72px;
 line-height: 1;
 font-weight: 700;
}

.vmv-vision-card p {
 position: relative;
 margin: 0;
 color: var(--primary-dark);
 font-size: 1.15rem;
 line-height: 1.8;
 font-weight: 500;
 font-style: italic;
}

.vmv-mission-card {
 height: 100%;
 padding: 22px;
 border-radius: 20px;
 transition: all var(--transition);
}

.vmv-mission-card:hover,
.vmv-value-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08) !important;
 border-color: rgba(37, 55, 120, 0.14) !important;
}

.vmv-mission-icon,
.vmv-value-icon {
 width: 52px;
 height: 52px;
 margin-bottom: 16px;
 border-radius: 16px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: linear-gradient(
  135deg,
  rgba(37, 55, 120, 0.1),
  rgba(232, 160, 32, 0.12)
 );
 color: var(--primary);
 font-size: 22px;
}

.vmv-mission-card h6,
.vmv-value-card h6 {
 margin-bottom: 10px;
 color: #111827;
 font-size: 1rem;
 font-weight: 700;
}

.vmv-mission-card p,
.vmv-value-card p {
 margin: 0;
 color: #667085;
 font-size: 14px;
 line-height: 1.7;
}

.vmv-value-card {
 padding: 24px;
 border-radius: 20px !important;
}

@media (max-width: 575.98px) {
 .vmv-intro-card,
 .vmv-vision-card,
 .vmv-mission-card,
 .vmv-value-card {
  padding-left: 20px;
  padding-right: 20px;
 }

 .vmv-vision-card p {
  font-size: 1.02rem;
 }
}

.history-hero {
 background: linear-gradient(
  180deg,
  rgba(37, 55, 120, 0.03) 0%,
  rgba(255, 255, 255, 0) 100%
 );
}

.history-signal-card,
.history-panel {
 background: var(--white);
 border: 1px solid rgba(37, 55, 120, 0.08);
 box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}

.history-signal-card {
 padding: 20px 22px;
 border-radius: 20px;
}

.history-signal-card strong {
 display: block;
 margin-bottom: 6px;
 color: #111827;
 font-size: 1.02rem;
 font-weight: 800;
}

.history-signal-card span {
 display: block;
 color: #667085;
 font-size: 13.5px;
 line-height: 1.6;
}

.history-note {
 display: flex;
 flex-direction: column;
 gap: 4px;
 max-width: 420px;
}

.history-note strong {
 color: #1f2937;
 font-size: 13px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.06em;
}

.history-note span {
 color: #667085;
 font-size: 13.5px;
 line-height: 1.6;
}

.history-visual {
 padding: 18px;
}

.history-visual-accent {
 position: absolute;
 inset: 0;
 border-radius: 28px;
 background: linear-gradient(
  135deg,
  rgba(37, 55, 120, 0.08),
  rgba(232, 160, 32, 0.1)
 );
 transform: translate(16px, 16px);
}

.history-panel {
 position: absolute;
 left: 0;
 bottom: -12px;
 width: min(360px, calc(100% - 24px));
 padding: 22px;
 border-radius: 22px;
}

.history-panel-label {
 display: inline-block;
 margin-bottom: 10px;
 color: var(--primary);
 font-size: 11px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.08em;
}

.history-panel h5 {
 margin-bottom: 12px;
 color: #111827;
 font-size: 1.08rem;
 font-weight: 700;
}

.history-panel-list {
 list-style: none;
 padding: 0;
 margin: 0;
}

.history-panel-list li {
 position: relative;
 padding-left: 22px;
 margin-bottom: 10px;
 color: #4b5563;
 font-size: 13.5px;
 line-height: 1.6;
}

.history-panel-list li::before {
 content: '';
 position: absolute;
 left: 0;
 top: 8px;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--accent);
}

.history-timeline-section {
 background: #f5f7fc;
}

@media (max-width: 991.98px) {
 .history-panel {
  position: relative;
  left: auto;
  bottom: auto;
  width: 100%;
  margin-top: 18px;
 }

 .history-visual-accent {
  transform: translate(10px, 10px);
 }
}

@media (max-width: 575.98px) {
 .history-signal-card,
 .history-panel {
  padding: 18px;
 }
}

.strategy-page,
.guiding-page {
 background: linear-gradient(
  180deg,
  rgba(37, 55, 120, 0.03) 0%,
  rgba(255, 255, 255, 0) 100%
 );
}

.strategy-intro-card,
.guiding-intro-card,
.guiding-rule-card {
 background: var(--white);
 border: 1px solid rgba(37, 55, 120, 0.08);
 border-radius: 22px;
 box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}

.strategy-intro-card,
.guiding-intro-card {
 padding: 28px;
}

.strategy-tag,
.guiding-tag {
 display: inline-block;
 margin-bottom: 12px;
 padding: 7px 11px;
 border-radius: 999px;
 background: rgba(37, 55, 120, 0.08);
 color: var(--primary);
 font-size: 11px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.08em;
}

.strategy-intro-card h5,
.guiding-intro-card h5 {
 margin-bottom: 14px;
 color: #111827;
 font-size: 1.1rem;
 font-weight: 700;
}

.strategy-mini-list,
.guiding-mini-list {
 list-style: none;
 padding: 0;
 margin: 0;
}

.strategy-mini-list li,
.guiding-mini-list li {
 position: relative;
 padding-left: 22px;
 margin-bottom: 10px;
 color: #4b5563;
 font-size: 13.5px;
 line-height: 1.6;
}

.strategy-mini-list li::before,
.guiding-mini-list li::before {
 content: '';
 position: absolute;
 left: 0;
 top: 8px;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--accent);
}

.strategy-page-card {
 display: flex;
 gap: 18px;
 align-items: flex-start;
 padding: 24px;
}

.strategy-page-card .num {
 width: 54px;
 height: 54px;
 border-radius: 16px;
 background: linear-gradient(
  135deg,
  rgba(37, 55, 120, 0.1),
  rgba(232, 160, 32, 0.12)
 );
 color: var(--primary);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 font-size: 18px;
 font-weight: 800;
}

.strategy-page-card h6,
.guiding-principle-card h5,
.guiding-rule-card h6 {
 margin-bottom: 10px;
 color: #111827;
 font-weight: 700;
}

.strategy-page-card h6 {
 font-size: 1rem;
}

.strategy-page-card p,
.guiding-principle-card p,
.guiding-rule-card p {
 margin: 0;
 color: #667085;
 font-size: 14px;
 line-height: 1.7;
}

.guiding-principle-card {
 padding: 24px;
 border-radius: 20px !important;
 height: 100%;
}

.guiding-principle-icon {
 width: 54px;
 height: 54px;
 margin-bottom: 18px;
 border-radius: 16px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: linear-gradient(
  135deg,
  rgba(37, 55, 120, 0.1),
  rgba(232, 160, 32, 0.12)
 );
 color: var(--primary);
 font-size: 22px;
}

.guiding-rule-card {
 padding: 22px;
 transition: all var(--transition);
}

.guiding-rule-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
 border-color: rgba(37, 55, 120, 0.14);
}

@media (max-width: 575.98px) {
 .strategy-intro-card,
 .guiding-intro-card,
 .guiding-rule-card,
 .guiding-principle-card,
 .strategy-page-card {
  padding: 20px;
 }

 .strategy-page-card {
  gap: 14px;
 }
}

/* ─── Service Pages (Home/Personal/Auto/SME/Deposit/Card) ── */
.hero-section {
 position: relative;
 overflow: hidden;
}

.hero-section::before {
 content: '';
 position: absolute;
 inset: 0;
 background: radial-gradient(
  circle at 85% 20%,
  rgba(255, 255, 255, 0.18) 0%,
  transparent 38%
 );
 pointer-events: none;
}

.hero-section .container {
 position: relative;
 z-index: 1;
}

.hero-section h1,
.hero-section p {
 color: #fff !important;
}

.hero-section img {
 border: 1px solid rgba(255, 255, 255, 0.18);
 box-shadow: 0 20px 46px rgba(10, 20, 40, 0.28) !important;
 transition: transform var(--transition), box-shadow var(--transition);
}

.hero-section img:hover {
 transform: translateY(-4px) scale(1.01);
 box-shadow: 0 26px 56px rgba(10, 20, 40, 0.34) !important;
}

.hero-section .btn {
 border-radius: 999px;
 padding: 12px 34px !important;
 box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
 transition: transform var(--transition), box-shadow var(--transition);
}

.hero-section .btn:hover {
 transform: translateY(-2px);
 box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

.service-page section {
 position: relative;
}

.service-page h2 {
 letter-spacing: -0.02em;
}

.service-page .feature-card,
.service-page .card,
.service-page .rounded-3 {
 transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.service-page .feature-card {
 background: #fff;
 border-color: #e7ebf4 !important;
 box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.service-page .feature-card:hover {
 transform: translateY(-6px);
 box-shadow: 0 16px 34px rgba(15, 23, 42, 0.1);
 border-color: rgba(37, 55, 120, 0.2) !important;
}

.service-page .card {
 border-radius: 18px !important;
 box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06) !important;
}

.service-page .card:hover {
 transform: translateY(-4px);
 box-shadow: 0 20px 44px rgba(15, 23, 42, 0.11) !important;
}

.service-page .accordion-item {
 border-radius: 14px !important;
 overflow: hidden;
 box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

.service-page .accordion-button {
 font-weight: 600;
 color: #1f2937;
 background: #fff;
}

.service-page .accordion-button:not(.collapsed) {
 color: var(--primary);
 background: rgba(37, 55, 120, 0.04);
 box-shadow: none;
}

.service-page .accordion-button:focus {
 box-shadow: 0 0 0 0.15rem rgba(37, 55, 120, 0.15);
}

.service-page .form-range::-webkit-slider-thumb {
 background: var(--primary);
 box-shadow: 0 0 0 5px rgba(37, 55, 120, 0.14);
}

.service-page .form-range::-moz-range-thumb {
 background: var(--primary);
 border: none;
 box-shadow: 0 0 0 5px rgba(37, 55, 120, 0.14);
}

.service-page .text-center > div[style*='background: #f8f9fa; border-radius: 12px;'] {
 border: 1px solid #e8edf7;
 box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
 transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.service-page .text-center > div[style*='background: #f8f9fa; border-radius: 12px;']:hover {
 transform: translateY(-5px);
 box-shadow: 0 16px 34px rgba(15, 23, 42, 0.1);
 border-color: rgba(37, 55, 120, 0.2);
}

@media (max-width: 991.98px) {
 .hero-section {
  padding: 105px 0 64px !important;
 }

 .hero-section h1 {
  font-size: clamp(1.9rem, 6vw, 2.7rem) !important;
 }

 .service-page section.py-5 {
  padding-top: 3.6rem !important;
  padding-bottom: 3.6rem !important;
 }
}

.service-page .emi-calculator-card {
 border-radius: 18px !important;
 border: 1px solid #e8edf7 !important;
 box-shadow: 0 14px 36px rgba(15, 23, 42, 0.07) !important;
}

.service-page .emi-result-panel {
 border: 1px solid rgba(37, 55, 120, 0.12);
 background: linear-gradient(135deg, rgba(37, 55, 120, 0.08), rgba(37, 55, 120, 0.02)) !important;
}

.service-page #emiResult {
 letter-spacing: 0.01em;
 font-size: clamp(1.35rem, 2vw, 1.9rem);
}