/* =============================================
   CRESTON BANK – Design System & UI Overrides
   Premium Corporate Fintech Design System
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* ---- Creston Bank CSS Variables ---- */
:root {
  --font-primary: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-jakarta: var(--font-primary);
  --font-outfit: var(--font-primary);
  --font-manrope: var(--font-primary);
  
  /* Primary Banking Palette */
  --primary-color: #1456D8;
  --primary-dark: #0B1F3A;
  --primary-color-2: #2563EB;
  --secondary-color: #2563EB;
  --secondary-light: #EFF6FF;
  --accent-cyan: #38BDF8;
  
  /* Neutral & Surface Palette */
  --bg-color: #F8FAFC;
  --surface-color: #FFFFFF;
  --surface-alt: #F1F5F9;
  --h2-color: #0B1F3A;
  --h3-color: #0F172A;
  --paragraph-color: #334155;
  --stroke-color: #E2E8F0;
  --stroke-subtle: #F1F5F9;
  
  /* Whites */
  --white-color: #FFFFFF;
  --white-1: #F8FAFC;
  --white-2: #EFF6FF;
  
  /* Shadows & Elevation */
  --card-shadow: 0 4px 20px rgba(11, 31, 58, 0.06);
  --card-shadow-hover: 0 12px 36px rgba(20, 86, 216, 0.12);
  --elevation-sm: 0 2px 8px rgba(11, 31, 58, 0.04);
  --elevation-md: 0 8px 24px rgba(11, 31, 58, 0.08);
  --elevation-lg: 0 20px 48px rgba(11, 31, 58, 0.14);
  
  /* Micro Transitions */
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-lg: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
}

/* ---- Global Unified Typography ---- */
html, body, * {
  font-family: var(--font-primary);
}

body {
  font-family: var(--font-primary) !important;
  color: var(--paragraph-color) !important;
  background-color: var(--bg-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary) !important;
  color: var(--h2-color) !important;
  letter-spacing: -0.02em;
}

p {
  font-family: var(--font-primary) !important;
  line-height: 1.7 !important;
  font-weight: 400;
}

/* ---- Redesigned Executive Topbar (Requirement 9) ---- */
.pp-header-area .header-top-area {
  background: #071326 !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-primary) !important;
}

.creston-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.creston-topbar-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.creston-topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none !important;
  transition: var(--transition);
}

.creston-topbar-item i {
  color: #38BDF8;
  font-size: 14px;
}

.creston-topbar-item:hover {
  color: #FFFFFF !important;
}

.creston-topbar-item:hover i {
  color: #FFFFFF;
}

.creston-topbar-divider {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.18);
}

.creston-topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.creston-topbar-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: var(--transition);
}

.creston-topbar-lang:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF !important;
}

.creston-topbar-lang i {
  font-size: 10px;
  opacity: 0.7;
}

@media (max-width: 767px) {
  .pp-header-area .header-top-area {
    padding: 6px 0 !important;
  }
  .creston-topbar-inner {
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
  }
  .creston-topbar-left {
    gap: 12px;
    font-size: 12px;
  }
  .creston-topbar-item {
    font-size: 12px;
  }
  .creston-topbar-divider {
    display: inline-block;
  }
}

@media (max-width: 480px) {
  .creston-topbar-item.topbar-mail {
    display: none;
  }
  .creston-topbar-divider {
    display: none;
  }
}

.pp-header-area .header-btm-area {
  padding: 18px 0 !important;
  background: #FFFFFF;
  border-bottom: 1px solid var(--stroke-color);
  box-shadow: 0 1px 3px rgba(11, 31, 58, 0.04);
}

.pp-header-area .header-btm-area.sticky-header {
  box-shadow: 0 8px 30px rgba(11, 31, 58, 0.08) !important;
}

/* ---- Creston Bank SVG Logo styling ---- */
.creston-logo-svg,
.straton-logo-svg {
  height: 42px;
  width: auto;
  flex-shrink: 0;
  display: block;
}

.logo {
  height: 42px !important;
  width: auto !important;
  max-width: 220px !important;
}

/* ---- Navigation ---- */
.bb-menu li a {
  font-family: var(--font-jakarta) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: #1E293B !important;
  letter-spacing: -0.01em;
  position: relative;
  padding-bottom: 6px;
  transition: var(--transition);
}

.bb-menu li a:hover,
.bb-menu li.active_link > a {
  color: var(--primary-color) !important;
}

.bb-menu li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2.5px;
  background: var(--primary-color);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.bb-menu li a:hover::after,
.bb-menu li.active_link > a::after {
  width: 100%;
}

/* ---- Buttons ---- */
.template-btn {
  font-family: var(--font-jakarta) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  border-radius: var(--radius-sm) !important;
  transition: var(--transition) !important;
}

.template-btn.primary-btn {
  background: var(--primary-color) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(20, 86, 216, 0.3);
}

.template-btn.primary-btn:hover {
  background: #0f45b2 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(20, 86, 216, 0.4);
  color: #FFFFFF !important;
}

.template-btn.primary-outline-btn {
  background: transparent !important;
  color: var(--primary-color) !important;
  border: 1.5px solid var(--primary-color) !important;
}

.template-btn.primary-outline-btn:hover {
  background: var(--primary-color) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(20, 86, 216, 0.25);
}

.template-btn.secondary-btn {
  border: 1.5px solid var(--stroke-color) !important;
  background: #FFFFFF !important;
  color: var(--h2-color) !important;
}

.template-btn.secondary-btn:hover {
  border-color: var(--primary-color) !important;
  background: var(--secondary-light) !important;
  color: var(--primary-color) !important;
}

/* ---- Hero Section ---- */
.bb-hero-section {
  background: linear-gradient(145deg, #0B1F3A 0%, #102A54 55%, #1456D8 100%) !important;
  position: relative;
  overflow: hidden;
}

.bb-hero-section::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -15%;
  width: 650px;
  height: 650px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.bb-hero-section::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(20, 86, 216, 0.35) 0%, transparent 70%);
  pointer-events: none;
}

.bb-hero-section .lg-title,
.bb-hero-section h1 {
  color: #FFFFFF !important;
  font-size: clamp(36px, 5vw, 68px) !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

.bb-hero-section .des,
.bb-hero-section p {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
  max-width: 560px;
}

/* ---- Service & Feature Cards ---- */
.bn-single-service-card {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--stroke-color) !important;
  transition: var(--transition-lg) !important;
  background: #FFFFFF !important;
  box-shadow: var(--card-shadow) !important;
  overflow: hidden;
}

.bn-single-service-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--card-shadow-hover) !important;
  border-color: rgba(20, 86, 216, 0.25) !important;
}

.bn-single-service-card .title {
  font-family: var(--font-outfit) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  color: var(--h2-color) !important;
  margin-bottom: 8px;
}

.bn-single-service-card .des {
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--paragraph-color);
}

.bn-single-service-card-2 {
  padding: 28px !important;
  background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%) !important;
  border: 1px solid var(--stroke-color);
  border-radius: var(--radius-md);
}

/* ---- About Section ---- */
.bb-home-about-section {
  background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 100%) !important;
}

.about-contents h2 {
  font-weight: 800 !important;
  font-size: clamp(28px, 3.5vw, 50px) !important;
  color: var(--h2-color) !important;
}

.features-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--stroke-color);
}

.features-list li i {
  color: var(--primary-color) !important;
  font-size: 18px;
  flex-shrink: 0;
}

.features-list li h5 {
  font-family: var(--font-jakarta) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--h2-color) !important;
  margin: 0;
}

/* ---- Stats / Counter Section ---- */
.bn-counter-section,
.bb-counter-section {
  background: linear-gradient(135deg, #0B1F3A 0%, #1456D8 100%) !important;
}

.bn-counter-section .count,
.bb-counter-section .count {
  color: #FFFFFF !important;
  font-family: var(--font-outfit) !important;
  font-weight: 800 !important;
}

.bn-counter-section p,
.bb-counter-section p {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* ---- Testimonials ---- */
.bb-testimonial-section {
  background: #FFFFFF;
}

.bn-single-testimonial-card {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--stroke-color) !important;
  box-shadow: var(--card-shadow) !important;
  background: #FFFFFF !important;
  transition: var(--transition) !important;
}

.bn-single-testimonial-card:hover {
  box-shadow: var(--card-shadow-hover) !important;
  transform: translateY(-4px) !important;
  border-color: rgba(20, 86, 216, 0.2) !important;
}

/* ---- Newsletter ---- */
.bb-newsletter-section {
  background: linear-gradient(135deg, #0B1F3A 0%, #1456D8 100%) !important;
  border-radius: var(--radius-lg);
  margin: 0 24px;
}

/* ---- Footer ---- */
.bb-footer-section {
  background: linear-gradient(160deg, #F8FAFC 0%, #F1F5F9 100%) !important;
  border-top: 1px solid var(--stroke-color);
}

.footer-widget .foo-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--h2-color) !important;
  margin-bottom: 16px;
  font-family: var(--font-outfit) !important;
}

.footer-widget ul li {
  margin-bottom: 8px;
}

.footer-widget ul li a {
  font-size: 14px !important;
  color: #475569 !important;
  transition: var(--transition);
}

.footer-widget ul li a:hover {
  color: var(--primary-color) !important;
  padding-left: 4px;
}

.bb-footer-section .copyright-text {
  background: transparent;
  border-top: 1px solid var(--stroke-color);
}

.bb-footer-section .copyright-text p {
  font-size: 13px !important;
  color: #64748B !important;
}

/* ---- Page Banner ---- */
.bb-banner-section,
.page-banner {
  background: linear-gradient(145deg, #0B1F3A 0%, #1456D8 100%) !important;
}

/* ---- Blog Cards ---- */
.bn-single-blog-card {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--stroke-color) !important;
  box-shadow: var(--card-shadow) !important;
  transition: var(--transition-lg) !important;
  overflow: hidden;
  background: #FFFFFF;
}

.bn-single-blog-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--card-shadow-hover) !important;
}

/* ---- FAQ Section ---- */
.bb-faq-section .accordion-button:not(.collapsed) {
  background: var(--secondary-light) !important;
  color: var(--primary-color) !important;
  font-weight: 700;
}

.bb-faq-section .accordion-item {
  border-radius: var(--radius-sm) !important;
  margin-bottom: 10px;
  border: 1px solid var(--stroke-color) !important;
  overflow: hidden;
}

/* ---- Contact Page ---- */
.bb-contact-section input,
.bb-contact-section textarea,
.bb-contact-section select {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--stroke-color) !important;
  transition: var(--transition) !important;
}

.bb-contact-section input:focus,
.bb-contact-section textarea:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(20, 86, 216, 0.15) !important;
}

/* ---- Social Icons in header ---- */
.social-icons-wraper a.social-icon-link {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
  transition: var(--transition);
  width: 30px !important;
  height: 30px !important;
  border-radius: 6px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.social-icons-wraper a.social-icon-link:hover {
  background: #FFFFFF !important;
  color: var(--primary-color) !important;
}

/* ---- Selection ---- */
::selection {
  background: #BFDBFE;
  color: #0B1F3A;
}

/* =============================================
   DASHBOARD SPECIFIC STYLES
   ============================================= */

.dashboard-wrapper {
  background-color: var(--bg-color);
  min-height: 100vh;
  padding-bottom: 60px;
}

/* Dashboard Nav */
.db-sub-nav {
  background: #FFFFFF;
  border-bottom: 1px solid var(--stroke-color);
  padding: 0;
  margin-bottom: 26px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(11, 31, 58, 0.04);
}

.db-sub-nav .nav-link {
  font-family: var(--font-jakarta);
  font-weight: 600;
  color: #475569;
  padding: 16px 20px;
  border-bottom: 3px solid transparent;
  transition: var(--transition);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.db-sub-nav .nav-link i {
  font-size: 15px;
  color: #64748B;
  transition: var(--transition);
}

.db-sub-nav .nav-link:hover {
  color: var(--primary-color);
}

.db-sub-nav .nav-link:hover i {
  color: var(--primary-color);
}

.db-sub-nav .nav-link.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
  background: rgba(20, 86, 216, 0.04);
}

.db-sub-nav .nav-link.active i {
  color: var(--primary-color);
}

/* Dashboard Cards */
.db-card {
  background: #FFFFFF;
  border-radius: var(--radius-md);
  border: 1px solid var(--stroke-color);
  box-shadow: var(--card-shadow);
  padding: 24px;
  transition: var(--transition);
}

.db-card:hover {
  box-shadow: var(--card-shadow-hover);
  border-color: rgba(20, 86, 216, 0.2);
}

/* Balance Cards */
.balance-card {
  background: linear-gradient(135deg, #0B1F3A 0%, #1456D8 100%);
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  padding: 26px;
}

.balance-card::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.18) 0%, transparent 70%);
}

.balance-card .card-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 8px;
}

.balance-card .balance-amount {
  font-family: var(--font-outfit);
  font-size: 34px;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 12px;
}

.balance-card .acc-number {
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 2px;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.9);
}

/* Action Icons Tray */
.action-icon-box {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 18px;
}

.bg-soft-blue { background: rgba(20, 86, 216, 0.1); color: #1456D8; }
.bg-soft-navy { background: rgba(11, 31, 58, 0.08); color: #0B1F3A; }
.bg-soft-cyan { background: rgba(56, 189, 248, 0.12); color: #0284C7; }
.bg-soft-green { background: rgba(16, 185, 129, 0.1); color: #059669; }
.bg-soft-purple { background: rgba(147, 51, 234, 0.1); color: #7C3AED; }
.bg-soft-orange { background: rgba(245, 158, 11, 0.1); color: #D97706; }

/* Dashboard Table */
.db-table-card {
  padding: 0;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--stroke-color);
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
}

.db-table-card .card-header {
  padding: 18px 24px;
  background: #FFFFFF;
  border-bottom: 1px solid var(--stroke-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.db-table-card .card-header .title {
  font-family: var(--font-outfit);
  font-weight: 700;
  font-size: 18px;
  margin: 0;
  color: var(--h2-color);
}

.table.db-table {
  margin-bottom: 0;
}

.table.db-table thead th {
  background: #F8FAFC;
  border-top: none;
  border-bottom: 1px solid var(--stroke-color);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748B;
  padding: 14px 20px;
  font-weight: 700;
}

.table.db-table tbody td {
  padding: 16px 20px;
  vertical-align: middle;
  font-size: 14px;
  color: #1E293B;
  font-weight: 500;
  border-bottom: 1px solid #F1F5F9;
}

.table.db-table tbody tr:last-child td {
  border-bottom: none;
}

.table.db-table tbody tr:hover {
  background-color: #F8FAFC;
}

/* Status Badges */
.status-badge {
  padding: 5px 12px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.status-completed { background: #ECFDF5; color: #047857; }
.status-pending { background: #FFFBEB; color: #B45309; }
.status-rejected { background: #FEF2F2; color: #B91C1C; }

/* Referral Section */
.referral-box {
  background: #FFFFFF;
  border: 1px dashed var(--stroke-color);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.referral-input {
  background: #F8FAFC;
  border: 1px solid var(--stroke-color);
  border-radius: 8px;
  padding: 10px 14px;
  flex-grow: 1;
  font-family: var(--font-jakarta);
  font-size: 14px;
  color: var(--paragraph-color);
}

.copy-btn {
  background: var(--primary-color);
  color: #FFFFFF;
  border: none;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition);
}

.copy-btn:hover {
  background: #0f45b2;
  transform: scale(1.04);
}

/* ---- High-Contrast Accessibility Overrides (Requirement 6) ---- */
.hero-inner-content h1.lg-title,
.bb-hero-section .lg-title,
.bb-hero-section h1 {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5) !important;
}

.hero-inner-content p.des,
.bb-hero-section .des,
.bb-hero-section p {
  color: rgba(255, 255, 255, 0.90) !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
  font-weight: 400 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}

/* Override lower banner green background with executive navy (Requirement 7) */
.bb-banner-section .banner-bg-wrapper {
  background: linear-gradient(135deg, #071326 0%, #0B1F3A 60%, #1456D8 100%) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 16px 48px rgba(11, 31, 58, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.bn-single-service-card .title {
  color: #0B1F3A !important;
  font-weight: 700 !important;
}

.bn-single-service-card .des {
  color: #475569 !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
}

.bb-breadcrumb-area {
  background: linear-gradient(135deg, #071326 0%, #0B1F3A 60%, #1456D8 100%) !important;
  padding: 60px 0 !important;
}

.bb-breadcrumb-area h2.bread-title {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.bb-breadcrumb-area ul li,
.bb-breadcrumb-area ul li a {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 500;
}

.bb-breadcrumb-area ul li.active {
  color: #38BDF8 !important;
  font-weight: 700;
}

.features-list li h5 {
  color: #0F172A !important;
  font-weight: 600 !important;
}

.features-list li i {
  color: #1456D8 !important;
}

.single-counter-item .title {
  color: #0B1F3A !important;
  font-weight: 800 !important;
}

.single-counter-item .des {
  color: #475569 !important;
  font-weight: 600 !important;
}

.banner-contents h2.title {
  color: #FFFFFF !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

.banner-contents p.des {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 16px;
  line-height: 1.7;
}

/* ==========================================================================
   CRESTON BANK - Redesigned Executive Footer Styles
   ========================================================================== */
.creston-footer {
  background: radial-gradient(circle at 85% 10%, rgba(20, 86, 216, 0.12) 0%, transparent 40%),
              linear-gradient(180deg, #071326 0%, #050E1C 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 64px 0 0 0;
  color: #94A3B8;
  font-family: var(--font-primary) !important;
  position: relative;
  overflow: hidden;
}

.creston-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  width: 300px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #38BDF8, transparent);
}

.creston-footer-widget {
  margin-bottom: 24px;
}

.creston-footer-desc {
  font-size: 14px;
  line-height: 1.7;
  color: #94A3B8;
  margin-bottom: 20px;
}

.creston-footer-heading {
  color: #FFFFFF !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  margin-bottom: 22px !important;
  position: relative;
  padding-bottom: 8px;
}

.creston-footer-heading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 24px;
  height: 2px;
  background: #1456D8;
  border-radius: 2px;
}

.creston-footer-nav {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.creston-footer-nav li a {
  color: #94A3B8 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.creston-footer-nav li a i {
  font-size: 11px;
  color: #38BDF8;
  opacity: 0.6;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.creston-footer-nav li a:hover {
  color: #38BDF8 !important;
  transform: translateX(4px);
}

.creston-footer-nav li a:hover i {
  opacity: 1;
  transform: translateX(2px);
}

/* Footer Socials */
.creston-social-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #FFFFFF !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
}

.creston-social-btn:hover {
  background: #1456D8 !important;
  border-color: #38BDF8 !important;
  transform: translateY(-3px);
  box-shadow: 0 4px 14px rgba(20, 86, 216, 0.4);
  color: #FFFFFF !important;
}

.creston-social-btn.creston-social-wa:hover {
  background: #25D366 !important;
  border-color: #25D366 !important;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4);
}

/* Footer Direct Contact */
.creston-footer-contact-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.creston-contact-link,
.creston-contact-static {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-decoration: none !important;
  transition: transform 0.2s ease;
}

.creston-contact-link:hover {
  transform: translateX(4px);
}

.contact-icon-bubble {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(20, 86, 216, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.2);
  color: #38BDF8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.creston-contact-link:hover .contact-icon-bubble {
  background: #1456D8;
  color: #FFFFFF;
  border-color: #38BDF8;
}

.creston-wa-link:hover .contact-icon-bubble {
  background: #25D366 !important;
  border-color: #25D366 !important;
  color: #FFFFFF !important;
}

.contact-text-group .contact-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748B;
  display: block;
  font-weight: 600;
}

.contact-text-group .contact-val {
  font-size: 13.5px;
  color: #F1F5F9;
  font-weight: 600;
  line-height: 1.3;
  display: block;
  transition: color 0.2s ease;
}

.creston-contact-link:hover .contact-val {
  color: #38BDF8;
}

/* Footer Bottom Bar */
.creston-footer-bottom {
  margin-top: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
  color: #64748B;
  background: rgba(5, 14, 28, 0.6);
}

.creston-copyright-text {
  color: #94A3B8;
  font-weight: 500;
}

.creston-footer-bottom-links {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.creston-footer-bottom-links a {
  color: #94A3B8 !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.creston-footer-bottom-links a:hover {
  color: #38BDF8 !important;
}

.creston-footer-bottom-links .divider {
  color: #475569;
}

.creston-security-badge {
  color: #CBD5E1;
  font-weight: 600;
}

/* ==========================================================================
   CRESTON BANK - Animated Hamburger & Mobile Navigation
   ========================================================================== */
.creston-hamburger-btn,
.mobile-menu-toggle {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background: rgba(20, 86, 216, 0.08) !important;
  border: 1px solid rgba(20, 86, 216, 0.18) !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  padding: 0 !important;
  transition: all 0.25s ease !important;
  position: relative;
  z-index: 10;
}

.creston-hamburger-btn:hover,
.mobile-menu-toggle:hover {
  background: rgba(20, 86, 216, 0.15) !important;
  border-color: #1456D8 !important;
}

/* Hamburger: strictly hidden on desktop (>=992px), shown only on mobile/tablet */
@media (min-width: 992px) {
  .creston-hamburger-btn,
  .mobile-menu-toggle {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }
}

.creston-hamburger-btn .hamburger-box,
.mobile-menu-toggle .hamburger-box {
  width: 22px;
  height: 16px;
  position: relative;
  display: block;
}

.creston-hamburger-btn .hamburger-line,
.mobile-menu-toggle .hamburger-line {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #0B1F3A;
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hamburger-line-1 { top: 0; }
.hamburger-line-2 { top: 7px; }
.hamburger-line-3 { top: 14px; }

/* Active Hamburger transforms into sleek X */
.creston-hamburger-btn.is-active,
.mobile-menu-toggle.is-active,
.creston-hamburger-btn.active,
.mobile-menu-toggle.active {
  background: rgba(20, 86, 216, 0.15) !important;
  border-color: #1456D8 !important;
}

.creston-hamburger-btn.is-active .hamburger-line-1,
.mobile-menu-toggle.is-active .hamburger-line-1,
.creston-hamburger-btn.active .hamburger-line-1,
.mobile-menu-toggle.active .hamburger-line-1 {
  transform: translateY(7px) rotate(45deg);
  background: #1456D8;
}

.creston-hamburger-btn.is-active .hamburger-line-2,
.mobile-menu-toggle.is-active .hamburger-line-2,
.creston-hamburger-btn.active .hamburger-line-2,
.mobile-menu-toggle.active .hamburger-line-2 {
  opacity: 0;
  transform: scale(0);
}

.creston-hamburger-btn.is-active .hamburger-line-3,
.mobile-menu-toggle.is-active .hamburger-line-3,
.creston-hamburger-btn.active .hamburger-line-3,
.mobile-menu-toggle.active .hamburger-line-3 {
  transform: translateY(-7px) rotate(-45deg);
  background: #1456D8;
}

/* Backdrop Overlay */
.creston-mobile-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 19, 38, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.creston-mobile-backdrop.active {
  opacity: 1;
  visibility: visible;
}

/* Mobile Off-canvas Drawer */
.creston-mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(340px, 86vw);
  height: 100vh;
  height: 100dvh;
  background: #FFFFFF;
  z-index: 9999;
  box-shadow: -10px 0 40px rgba(7, 19, 38, 0.25);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  font-family: var(--font-primary) !important;
}

.creston-mobile-drawer.active {
  transform: translateX(0);
}

.creston-mobile-drawer-header {
  padding: 18px 22px;
  border-bottom: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #F8FAFC;
}

.creston-mobile-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(11, 31, 58, 0.06);
  border: 1px solid rgba(11, 31, 58, 0.1);
  color: #0B1F3A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.22s ease;
}

.creston-mobile-close-btn:hover {
  background: #FEF2F2;
  color: #DC2626;
  border-color: #FECACA;
  transform: rotate(90deg);
}

.creston-mobile-drawer-body {
  padding: 24px 20px;
  overflow-y: auto;
  flex: 1;
}

.creston-mobile-menu-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.creston-mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  color: #1E293B !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  opacity: 0;
  transform: translateX(20px);
}

.creston-mobile-drawer.active .creston-mobile-nav-link {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.3s ease calc(var(--nav-i, 1) * 0.05s), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--nav-i, 1) * 0.05s) !important;
}

.creston-mobile-nav-link:hover {
  background: rgba(20, 86, 216, 0.08);
  color: #1456D8 !important;
  transform: translateX(4px);
}

.creston-mobile-nav-link .nav-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(20, 86, 216, 0.08);
  color: #1456D8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s ease;
}

.creston-mobile-nav-link:hover .nav-icon {
  background: #1456D8;
  color: #FFFFFF;
}

.creston-mobile-support-box {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 13.5px;
  font-weight: 600;
}

.creston-mobile-support-box a {
  color: #1E293B;
  text-decoration: none;
}

.creston-mobile-support-box a:hover {
  color: #1456D8;
}

.creston-mobile-drawer-footer {
  padding: 16px 20px 24px;
  border-top: 1px solid #E2E8F0;
  background: #F8FAFC;
}

.creston-mobile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.creston-mobile-btn-outline {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  color: #0B1F3A !important;
}

.creston-mobile-btn-outline:hover {
  background: #F1F5F9;
  border-color: #1456D8;
  color: #1456D8 !important;
}

.creston-mobile-btn-primary {
  background: linear-gradient(135deg, #1456D8 0%, #2563EB 100%);
  color: #FFFFFF !important;
  border: none;
  box-shadow: 0 4px 12px rgba(20, 86, 216, 0.3);
}

.creston-mobile-btn-primary:hover {
  background: linear-gradient(135deg, #0f45b2 0%, #1d4ed8 100%);
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

.creston-body-lock {
  overflow: hidden !important;
  touch-action: none !important;
}

/* ==========================================================================
   CRESTON BANK - Scroll Reveal & Micro-Interactions
   ========================================================================== */
html {
  scroll-behavior: smooth;
}

body {
  opacity: 1;
}

body.creston-page-loaded {
  opacity: 1;
}

.creston-reveal-item {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0s),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0s);
  will-change: opacity, transform;
}

.creston-reveal-item.creston-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Card Lift & Soft Shadow */
.bn-single-service-card,
.single-counter-item,
.blog-item,
.service-item,
.single-service-box {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease !important;
}

.bn-single-service-card:hover,
.single-counter-item:hover,
.blog-item:hover,
.single-service-box:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 36px rgba(11, 31, 58, 0.12) !important;
  border-color: rgba(20, 86, 216, 0.25) !important;
}

/* Button Micro-Interactions */
.template-btn,
.primary-btn,
.secondary-btn {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s ease,
              background 0.2s ease !important;
}

.template-btn:hover,
.primary-btn:hover,
.secondary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(20, 86, 216, 0.28);
}

.template-btn:active,
.creston-btn-pressed {
  transform: scale(0.98) translateY(0) !important;
}

.template-btn:focus-visible {
  outline: 3px solid #38BDF8 !important;
  outline-offset: 2px !important;
}

/* Sticky Header Scrolled State */
.header-btm-area {
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.header-btm-area.creston-header-scrolled,
.header-btm-area.sticky-header {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 8px 28px rgba(7, 19, 38, 0.08) !important;
  padding: 12px 0 !important;
}

/* Accordion Enhanced Styling */
.creg-accodion .accordion-item {
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  overflow: hidden;
  transition: all 0.25s ease;
  background: #FFFFFF;
}

.creg-accodion .accordion-item.creston-accordion-active {
  border-color: #1456D8 !important;
  box-shadow: 0 8px 24px rgba(20, 86, 216, 0.08);
}

.creg-accodion .heading {
  cursor: pointer;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  transition: background 0.2s ease;
}

.creg-accodion .heading:hover {
  background: #F8FAFC;
}

.creg-accodion .heading::after {
  content: '\f078';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  margin-left: auto;
  color: #64748B;
  transition: transform 0.25s ease, color 0.25s ease;
}

.creg-accodion .heading[aria-expanded="true"]::after,
.creg-accodion .heading:not(.collapsed)::after {
  transform: rotate(180deg);
  color: #1456D8;
}

/* Form Interactivity */
.form-control {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

.form-control:focus {
  border-color: #1456D8 !important;
  box-shadow: 0 0 0 4px rgba(20, 86, 216, 0.12) !important;
  background: #FFFFFF !important;
}

.form-control.is-invalid {
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}

/* Image Zoom */
.creston-img-frame {
  overflow: hidden !important;
  border-radius: 16px;
}

.creston-smooth-img {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.creston-img-frame:hover .creston-smooth-img {
  transform: scale(1.04);
}

/* Accessibility: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
  .creston-reveal-item {
    opacity: 1 !important;
    transform: none !important;
  }
  body {
    opacity: 1 !important;
  }
}

/* ==========================================================================
   PAGE BASE & FOOTER ALIGNMENT – Clean white body with seamless footer
   ========================================================================== */
html {
  background-color: #050E1C; /* Matches bottom of footer for overscroll bounce */
}

body {
  background-color: #ffffff !important; /* Preserves crisp, authentic white backgrounds across all pages */
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure footer sits completely flush with bottom */
.creston-footer {
  margin-bottom: 0 !important;
}

/* ==========================================================================
   COOKIE CONSENT BANNER – Fixed overlay (reliable dismissal, no layout shift)
   ========================================================================== */
.js-cookie-consent.cookie-consent {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99990 !important;
  background: rgba(5, 14, 28, 0.97) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 14px 32px !important;
  margin: 0 !important;
  display: flex;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  pointer-events: auto !important;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease !important;
}

/* Forced hide when dismissed */
.js-cookie-consent.cookie-consent.cookie-consent-hidden,
.js-cookie-consent.cookie-consent[style*="none"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(100%) !important;
}

.cookie-consent__message {
  color: rgba(255, 255, 255, 0.88) !important;
  font-family: var(--font-primary) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

.js-cookie-consent-agree.cookie-consent__agree {
  background: #1456D8 !important;
  border: 1px solid #1456D8 !important;
  color: #FFFFFF !important;
  font-family: var(--font-primary) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 9px 22px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 99999 !important;
  pointer-events: auto !important;
}

.js-cookie-consent-agree.cookie-consent__agree:hover {
  background: #0f45b2 !important;
  border-color: #0f45b2 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(20, 86, 216, 0.4) !important;
}

/* ==========================================================================
   AUTH PAGES – Explicit visibility and visual styling
   ========================================================================== */
body.creston-auth-body {
  background: radial-gradient(circle at 10% 20%, rgba(20, 86, 216, 0.18) 0%, transparent 50%),
              radial-gradient(circle at 90% 80%, rgba(56, 189, 248, 0.12) 0%, transparent 50%),
              linear-gradient(135deg, #071326 0%, #0B1F3A 55%, #0d274c 100%) !important;
  background-color: #071326 !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.creston-auth-shell {
  opacity: 1 !important;
  visibility: visible !important;
  background: #FFFFFF !important;
}

.creston-auth-card {
  opacity: 1 !important;
  visibility: visible !important;
  background: #FFFFFF !important;
}

.creston-auth-panel {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Auth card headings: dark text on white card background */
.creston-auth-card h1,
.creston-auth-card h2,
.creston-auth-card h3,
.creston-auth-card h4,
.creston-auth-card h5,
.creston-auth-card h6 {
  color: #0B1F3A !important;
}

/* Auth panel headings: white text on dark panel background */
.creston-auth-panel h1,
.creston-auth-panel h2,
.creston-auth-panel h3 {
  color: #FFFFFF !important;
}

/* Auth card paragraph text */
.creston-auth-card p,
.creston-auth-card label,
.creston-auth-card .small {
  color: #334155;
}