/* ================================================================
   RR Finance Blog — PREMIUM UI  ·  White Background Edition
   Palette: Pure White · Deep Navy Text · Electric Teal · Warm Gold
   Drop-in CSS — Zero HTML changes required.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;0,700;1,500&family=Outfit:wght@300;400;500;600;700&display=swap');

/* ── Design Tokens ─────────────────────────────────────────────── */
:root {
  --bg:          #ffffff;
  --bg-soft:     #f4f7ff;
  --bg-card:     #ffffff;
  --navy:        #0a0f2e;
  --navy-mid:    #1a2560;
  --teal:        #00b8ae;
  --teal-light:  #e6f9f8;
  --teal-glow:   rgba(0,184,174,.15);
  --gold:        #e09500;
  --gold-light:  #fff8e6;
  --gold-glow:   rgba(224,149,0,.15);
  --text-dark:   #0a0f2e;
  --text-body:   #374263;
  --text-muted:  #7a8bbf;
  --border:      #e4eaf7;
  --border-teal: rgba(0,184,174,.2);
  --radius:      16px;
  --ease:        cubic-bezier(.4,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ── Base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Outfit', sans-serif !important;
  background: var(--bg) !important;
  color: var(--text-body) !important;
  -webkit-font-smoothing: antialiased;
}

/* ── Section background with soft ambient orbs ─────────────────── */
.first-section.bg3 {
  background: #f7f2f2;
  position: relative !important;
  overflow: hidden !important;
}

/* Floating ambient orbs */
.first-section.bg3::before,
.first-section.bg3::after {
  content: '' !important;
  position: fixed !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.first-section.bg3::before {
  width: 700px !important; height: 700px !important;
  top: -200px !important; left: -200px !important;
  background: radial-gradient(circle, rgba(0,184,174,.07) 0%, transparent 70%) !important;
  animation: orb1 14s ease-in-out infinite alternate !important;
}
.first-section.bg3::after {
  width: 550px !important; height: 550px !important;
  bottom: -100px !important; right: -100px !important;
  background: radial-gradient(circle, rgba(224,149,0,.06) 0%, transparent 70%) !important;
  animation: orb2 17s ease-in-out infinite alternate !important;
}
@keyframes orb1 {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(90px,70px) scale(1.18); }
}
@keyframes orb2 {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(-70px,-90px) scale(1.22); }
}

.container.pb-5 { position: relative !important; z-index: 1 !important; }

/* ── Brand Header ──────────────────────────────────────────────── */
.h2.mb-0.d-inline-block.fw-bold.bg1.text-white {
  font-family: 'Cormorant Garamond', serif !important;
  background: linear-gradient(135deg, var(--teal) 0%, var(--gold) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  padding: 0.4rem 3rem 0.4rem 0.5rem !important;
  clip-path: none !important;
  border-bottom: 2.5px solid transparent !important;
  border-image: linear-gradient(90deg, var(--teal), var(--gold)) 1 !important;
  display: inline-block !important;
}

/* ── Section Headings ──────────────────────────────────────────── */
.h3.d-inline-block.fw-bold.text-nowrap.mb-3,
.h3.d-inline-block.fw-bold.text-nowrap.my-3 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  position: relative !important;
  padding-bottom: 0.6rem !important;
  letter-spacing: 0.01em !important;
  display: inline-block !important;
}
/* static gradient underline */
.h3.d-inline-block.fw-bold.text-nowrap.mb-3::before,
.h3.d-inline-block.fw-bold.text-nowrap.my-3::before {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 2px !important;
  width: 100% !important;
  background: linear-gradient(90deg, #0f0e96, #9b9045 60%, transparent) !important;
  border-radius: 99px !important;
}
/* animated teal glow runner */
.h3.d-inline-block.fw-bold.text-nowrap.mb-3::after,
.h3.d-inline-block.fw-bold.text-nowrap.my-3::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 2px !important;
  width: 30% !important;
  /* background: var(--teal) !important; */
  border-radius: 99px !important;
  box-shadow: 0 0 8px var(--teal) !important;
  animation: lineRun 3s ease-in-out infinite alternate !important;
}
@keyframes lineRun {
  from { width: 15%; opacity: .7; }
  to   { width: 75%; opacity: 1; }
}

/* ── Hero / Featured Cards ─────────────────────────────────────── */
.row.mt-2.rounded-2.shadow-sm.bg-white.align-items-start.my-2 {
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 24px rgba(10,15,46,.08) !important;
  background: var(--bg-card) !important;
  overflow: hidden !important;
  transition: transform .35s var(--ease-spring),
              box-shadow .35s var(--ease),
              border-color .3s var(--ease) !important;
  position: relative !important;
}
.row.mt-2.rounded-2.shadow-sm.bg-white.align-items-start.my-2::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  height: 3px !important; width: 0 !important;
  background: linear-gradient(90deg, #0b467a, #9b9045) !important;
  transition: width .45s var(--ease) !important;
  z-index: 5 !important;
}
.row.mt-2.rounded-2.shadow-sm.bg-white.align-items-start.my-2:hover::after {
  width: 100% !important;
}
.row.mt-2.rounded-2.shadow-sm.bg-white.align-items-start.my-2:hover {
  transform: translateY(-6px) !important;
  border-color: var(--border-teal) !important;
  box-shadow: 0 16px 48px rgba(10,15,46,.13),
              0 0 0 1px rgba(0,184,174,.12),
              0 0 32px rgba(0,184,174,.06) !important;
}

/* hero image */
.row.mt-2.rounded-2.shadow-sm.bg-white.align-items-start.my-2 .blog-thumbnail {
  overflow: hidden !important; height: 100% !important;
}
.row.mt-2.rounded-2.shadow-sm.bg-white.align-items-start.my-2 .blog-thumbnail img {
  width: 100% !important; height: 100% !important;
  min-height: 230px !important;
  object-fit: cover !important; display: block !important;
  transition: transform .6s var(--ease), filter .4s var(--ease) !important;
}
.row.mt-2.rounded-2.shadow-sm.bg-white.align-items-start.my-2:hover .blog-thumbnail img {
  transform: scale(1.06) !important;
  filter: brightness(1.05) saturate(1.15) !important;
}

/* hero body */
.row.mt-2.rounded-2.shadow-sm.bg-white.align-items-start.my-2 .px-2.py-4.px-lg-0.py-lg-0 {
  padding: 1.75rem 2rem !important;
}
.row.mt-2.rounded-2.shadow-sm.bg-white.align-items-start.my-2 h3.fs-4 {
  /* font-family: 'Cormorant Garamond', serif !important; */
  font-size: 1.42rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin-top: 0.6rem !important;
  color: var(--navy) !important;
}
.row.mt-2.rounded-2.shadow-sm.bg-white.align-items-start.my-2 h3.fs-4 a.text-theme.fw-bold {
  color: #4b4c4c !important;
  text-decoration: none !important;
  transition: color .25s !important;
}
.row.mt-2.rounded-2.shadow-sm.bg-white.align-items-start.my-2 h3.fs-4 a.text-theme.fw-bold:hover {
  color: #34539d !important;
}
.row.mt-2.rounded-2.shadow-sm.bg-white.align-items-start.my-2 p:not(.lead) {
  color: var(--text-body) !important; font-size: .88rem !important; line-height: 1.75 !important;
}

/* ── Grid Cards (.bg-white.rounded-3…) ────────────────────────── */
.bg-white.rounded-3.overflow-hidden.shadow.h-100 {
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 2px 16px rgba(10,15,46,.07) !important;
  background: var(--bg-card) !important;
  display: flex !important; flex-direction: column !important;
  overflow: hidden !important; position: relative !important;
  transition: transform .35s var(--ease-spring),
              box-shadow .35s var(--ease),
              border-color .3s var(--ease) !important;
}

/* shimmer sweep */
.bg-white.rounded-3.overflow-hidden.shadow.h-100::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: -100% !important;
  width: 60% !important; height: 100% !important;

  transition: left .55s var(--ease) !important;
  pointer-events: none !important; z-index: 2 !important;
}
.bg-white.rounded-3.overflow-hidden.shadow.h-100:hover::before { left: 150% !important; }

/* gradient top bar */
.bg-white.rounded-3.overflow-hidden.shadow.h-100::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  height: 3px !important; width: 0 !important;
  background: linear-gradient(90deg, #1a3a8f, #9b9045) !important;
  transition: width .4s var(--ease) !important; z-index: 3 !important;
}
.bg-white.rounded-3.overflow-hidden.shadow.h-100:hover::after { width: 100% !important; }

.bg-white.rounded-3.overflow-hidden.shadow.h-100:hover {
  transform: translateY(-7px) !important;
  border-color: rgba(0,184,174,.25) !important;
  box-shadow: 0 16px 44px rgba(10,15,46,.12),
              0 0 0 1px rgba(0,184,174,.1),
              0 0 28px rgba(0,184,174,.05) !important;
}

/* thumbnail */
.bg-white.rounded-3.overflow-hidden.shadow.h-100 .blog-thumbnail {
  height: 182px !important; overflow: hidden !important; flex-shrink: 0 !important;
}
.bg-white.rounded-3.overflow-hidden.shadow.h-100 .blog-thumbnail img,
.bg-white.rounded-3.overflow-hidden.shadow.h-100 .blog-thumbnail .thumbnail,
.bg-white.rounded-3.overflow-hidden.shadow.h-100 .blog-thumbnail .img-fluid {
  width: 100% !important;
  /* height: 182px !important; */
  object-fit: cover !important;
  display: block !important;
  transition: transform .55s var(--ease), filter .4s var(--ease) !important;
}
.bg-white.rounded-3.overflow-hidden.shadow.h-100:hover .blog-thumbnail img,
.bg-white.rounded-3.overflow-hidden.shadow.h-100:hover .blog-thumbnail .thumbnail {
  transform: scale(1.08) !important;
  filter: brightness(1.05) saturate(1.2) !important;
}

/* card body */
.bg-white.rounded-3.overflow-hidden.shadow.h-100 .p-3 {
  padding: 1.1rem 1.3rem 1.4rem !important;
  flex: 1 !important; display: flex !important; flex-direction: column !important;
  position: relative !important; z-index: 1 !important;
}

/* card heading */
.bg-white.rounded-3.overflow-hidden.shadow.h-100 h3.fs-5 {
  font-size: 1.06rem !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  margin-top: 0.5rem !important;
  flex: 1 !important;
  color: #4b4c4c !important;
}
.bg-white.rounded-3.overflow-hidden.shadow.h-100 h3.fs-5 a.text-theme {
  color: #4b4c4c !important;
  text-decoration: none !important;
  transition: color .25s !important;
}
.bg-white.rounded-3.overflow-hidden.shadow.h-100 h3.fs-5 a.text-theme:hover { color: #34539d !important; }

/* card excerpt */
.bg-white.rounded-3.overflow-hidden.shadow.h-100 p.small,
.bg-white.rounded-3.overflow-hidden.shadow.h-100 p.my-2.small {
  font-size: .81rem !important;
  line-height: 1.7 !important;
  color: #3d3d3e !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin-top: .45rem !important;
}

/* ── Older card (.bg-white.rounded-1…) ────────────────────────── */
.bg-white.rounded-1.overflow-hidden.shadow.h-100 {
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 2px 16px rgba(10,15,46,.07) !important;
  background: var(--bg-card) !important;
  overflow: hidden !important; position: relative !important;
  transition: transform .35s var(--ease-spring),
              box-shadow .35s var(--ease), border-color .3s var(--ease) !important;
}
.bg-white.rounded-1.overflow-hidden.shadow.h-100::after {
  content: '' !important;
  position: absolute !important; top: 0 !important; left: 0 !important;
  height: 3px !important; width: 0 !important;
  background: linear-gradient(90deg, var(--gold), var(--teal)) !important;
  transition: width .4s var(--ease) !important; z-index: 3 !important;
}
.bg-white.rounded-1.overflow-hidden.shadow.h-100:hover::after { width: 100% !important; }
.bg-white.rounded-1.overflow-hidden.shadow.h-100:hover {
  transform: translateY(-7px) !important;
  border-color: rgba(224,149,0,.25) !important;
  box-shadow: 0 16px 44px rgba(10,15,46,.12),
              0 0 0 1px rgba(224,149,0,.12),
              0 0 28px rgba(224,149,0,.05) !important;
}
.bg-white.rounded-1.overflow-hidden.shadow.h-100 .blog-thumbnail { overflow: hidden !important; }
.bg-white.rounded-1.overflow-hidden.shadow.h-100 .blog-thumbnail img,
.bg-white.rounded-1.overflow-hidden.shadow.h-100 .blog-thumbnail .img-fluid {
  width: 100% !important; height: 182px !important;
  object-fit: cover !important; display: block !important;
  transition: transform .55s var(--ease), filter .4s var(--ease) !important;
}
.bg-white.rounded-1.overflow-hidden.shadow.h-100:hover .blog-thumbnail img {
  transform: scale(1.08) !important; filter: brightness(1.05) saturate(1.2) !important;
}
.bg-white.rounded-1.overflow-hidden.shadow.h-100 .mt-3.p-3,
.bg-white.rounded-1.overflow-hidden.shadow.h-100 .p-3 {
  padding: 1.1rem 1.25rem 1.35rem !important;
}
.bg-white.rounded-1.overflow-hidden.shadow.h-100 h3.fs-5 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.02rem !important; font-weight: 700 !important;
  line-height: 1.5 !important; color: var(--navy) !important;
}
.bg-white.rounded-1.overflow-hidden.shadow.h-100 h3.fs-5 a.text-theme {
  color: var(--navy) !important; text-decoration: none !important; transition: color .25s !important;
}
.bg-white.rounded-1.overflow-hidden.shadow.h-100 h3.fs-5 a.text-theme:hover { color: var(--gold) !important; }
.bg-white.rounded-1.overflow-hidden.shadow.h-100 p.my-2 {
  color: var(--text-muted) !important; font-size: .82rem !important; line-height: 1.7 !important;
}

/* ── Date Badge ────────────────────────────────────────────────── */
.fw-600.small {
  display: inline-flex !important;
  align-items: center !important;
  gap: .3rem !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1a3a8f;
  text-transform: uppercase !important;
  letter-spacing: .09em !important;
  background: #f9faff !important;
  border: 1px solid rgb(52 83 157) !important;
  padding: .2rem .7rem !important;
  border-radius: 20px !important;
  margin-top: .2rem !important;
}
.fw-600.small i { color: var(--teal) !important; font-size: .65rem !important; }

/* ── "Continue reading" link ───────────────────────────────────── */
p.lead.mb-0 > a.text-theme.fw-bold,
p.lead.mb-2 > a.text-theme.fw-bold {
  display: inline-flex !important;
  align-items: center !important;
  gap: .35rem !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  color: #706727 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  margin-top: auto !important;
  padding-top: .85rem !important;
  transition: color .25s, gap .22s var(--ease) !important;
}
p.lead.mb-0 > a.text-theme.fw-bold::after,
p.lead.mb-2 > a.text-theme.fw-bold::after {
  content: '→' !important; display: inline-block !important;
  transition: transform .22s var(--ease-spring) !important;
}
p.lead.mb-0 > a.text-theme.fw-bold:hover,
p.lead.mb-2 > a.text-theme.fw-bold:hover { color: #34539d !important; }
p.lead.mb-0 > a.text-theme.fw-bold:hover::after,
p.lead.mb-2 > a.text-theme.fw-bold:hover::after { transform: translateX(6px) !important; }

/* hero card read-more gold */
.row.mt-2.rounded-2.shadow-sm.bg-white.align-items-start.my-2 p.lead > a {
  color: #706727 !important;
  font-size: 13px !important;
}
.row.mt-2.rounded-2.shadow-sm.bg-white.align-items-start.my-2 p.lead > a:hover {
  color: #34539d !important;
}

/* ── "Read More" Button ────────────────────────────────────────── */
a.moreless-button {
  background: #9b9045 !important;
  color: #ffffff;
  border: 1.5px solid #9b9045 !important;
  border-radius: 99px !important;
  padding: .6rem 2rem !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  display: inline-block !important;
  position: relative !important;
  overflow: hidden !important;
  transition: color .3s var(--ease), border-color .3s var(--ease),
              transform .28s var(--ease-spring), box-shadow .3s var(--ease) !important;
}

a.moreless-button:hover {
  color: #ffffff !important; border-color: transparent !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 28px rgba(0,184,174,.25) !important;
  background-color:#4b64a6 !important;
}
a.moreless-button:hover::before { opacity: 1 !important; }

/* ── General link ──────────────────────────────────────────────── */
a.text-theme {
  color: var(--text-dark) !important; text-decoration: none !important; transition: color .22s !important;
}
a.text-theme:hover { color: var(--teal) !important; }

/* ── Section spacing ───────────────────────────────────────────── */
.row.pb-2.mt-2.align-items-start,
.row.pb-2.mt-2.align-items-center.justify-content-center,
.row.pb-2.mt-2.mt-sm-5.align-items-start {
  margin-top: 3rem !important;
}

/* ── Staggered entrance animation ─────────────────────────────── */
@keyframes rrEntrance {
  from { opacity: 0; transform: translateY(26px) scale(.97); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.col-md-6.col-lg-4 {
  animation: rrEntrance .52s var(--ease) both !important;
}
.col-md-6.col-lg-4:nth-child(1) { animation-delay: .05s !important; }
.col-md-6.col-lg-4:nth-child(2) { animation-delay: .12s !important; }
.col-md-6.col-lg-4:nth-child(3) { animation-delay: .19s !important; }
.col-md-6.col-lg-4:nth-child(4) { animation-delay: .26s !important; }
.col-md-6.col-lg-4:nth-child(5) { animation-delay: .33s !important; }
.col-md-6.col-lg-4:nth-child(6) { animation-delay: .40s !important; }

.row.mt-2.rounded-2.shadow-sm.bg-white.align-items-start.my-2 {
  animation: rrEntrance .58s var(--ease) both !important;
}
.row.mt-2.rounded-2.shadow-sm.bg-white.align-items-start.my-2:nth-of-type(1) { animation-delay: .07s !important; }
.row.mt-2.rounded-2.shadow-sm.bg-white.align-items-start.my-2:nth-of-type(2) { animation-delay: .17s !important; }
.row.mt-2.rounded-2.shadow-sm.bg-white.align-items-start.my-2:nth-of-type(3) { animation-delay: .27s !important; }

/* ── Scrollbar ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px !important; }
::-webkit-scrollbar-track { background: #f0f4ff !important; }
::-webkit-scrollbar-thumb { background: #cdd6f0 !important; border-radius: 99px !important; }
::-webkit-scrollbar-thumb:hover { background: var(--teal) !important; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .row.mt-2.rounded-2.shadow-sm.bg-white.align-items-start.my-2 .blog-thumbnail img {
    min-height: 210px !important; height: 210px !important;
  }
}
@media (max-width: 767px) {
  .bg-white.rounded-3.overflow-hidden.shadow.h-100 .blog-thumbnail,
  .bg-white.rounded-3.overflow-hidden.shadow.h-100 .blog-thumbnail img,
  .bg-white.rounded-3.overflow-hidden.shadow.h-100 .blog-thumbnail .thumbnail {
    height: 160px !important;
  }
  .h3.d-inline-block.fw-bold.text-nowrap.mb-3,
  .h3.d-inline-block.fw-bold.text-nowrap.my-3 { font-size: 1.2rem !important; }
}

/****************/
        .blog-header {
            margin: 1rem 0;
        }
        
        .icon-wrapper {
            width: 40px;
            height: 40px;
            /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
            transition: transform 0.2s ease;
            border: 1px solid #39549e;
        }
        
        .icon-wrapper:hover {
            transform: scale(1.05);
        }
        
        .icon-wrapper svg {
            width: 24px;
            height: 24px;
            color: #39549e;
        }
        
        .blog-title {
            font-size: 1.8rem;
            font-weight: 700;
            margin: 0;
            background: linear-gradient(135deg, #546cac 0%, #9b9045 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: -0.5px;
        }
        
        /* Alternative solid color version */
        .blog-title-solid {
            font-size: 2rem;
            font-weight: 700;
            margin: 0;
            color: #2d3748;
            letter-spacing: -0.5px;
        }
        
        /* Minimal version */
        .minimal-icon svg {
            width: 32px;
            height: 32px;
            color: #667eea;
            margin-right: 12px;
            transition: color 0.2s ease;
        }
        
        .minimal-icon:hover svg {
            color: #764ba2;
        }
        
        .minimal-title {
            font-size: 2rem;
            font-weight: 700;
            margin: 0;
            color: #2d3748;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .blog-title, .blog-title-solid, .minimal-title {
                font-size: 1.5rem;
            }
            
            .icon-wrapper {
                width: 40px;
                height: 40px;
                
                
            }
            
            .icon-wrapper svg {
                width: 20px;
                height: 20px;
            }
        }