body {
    font-family: var(--font-geist-sans), -apple-system, BlinkMacSystemFont,
      "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  }

  *,
  :before,
  :after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
  }

  ::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
  }

  *,
  :before,
  :after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
  }

  :before,
  :after {
    --tw-content: ""
  }

  html,
  :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    font-family: '__nextjs-Geist';
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent
  }

  body {
    margin: 0;
    line-height: inherit;
    font-family: '__nextjs-Geist' !important;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit
  }

  a {
    color: inherit;
    text-decoration: inherit
  }

  b,
  strong {
    font-weight: bolder
  }

  code,
  kbd,
  samp,
  pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-size: 1em
  }

  small {
    font-size: 80%
  }

  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
  }

  sub {
    bottom: -.25em
  }

  sup {
    top: -.5em
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse
  }

  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0
  }

  button,
  select {
    text-transform: none
  }

  button,
  input:where([type=button]),
  input:where([type=reset]),
  input:where([type=submit]) {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none
  }

  :-moz-focusring {
    outline: auto
  }

  :-moz-ui-invalid {
    box-shadow: none
  }

  progress {
    vertical-align: baseline
  }

  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button {
    height: auto
  }

  [type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none
  }

  ::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
  }

  summary {
    display: list-item
  }

  blockquote,
  dl,
  dd,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  hr,
  figure,
  p,
  pre {
    margin: 0
  }

  fieldset {
    margin: 0;
    padding: 0
  }

  legend {
    padding: 0
  }

  ol,
  ul,
  menu {
    list-style: none;
    margin: 0;
    padding: 0
  }

  dialog {
    padding: 0
  }

  textarea {
    resize: vertical
  }

  input::-moz-placeholder,
  textarea::-moz-placeholder {
    opacity: 1;
    color: #9ca3af
  }

  input::placeholder,
  textarea::placeholder {
    opacity: 1;
    color: #9ca3af
  }

  button,
  [role=button] {
    cursor: pointer
  }

  :disabled {
    cursor: default
  }

  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    display: block;
    vertical-align: middle
  }

  img,
  video {
    max-width: 100%;
    height: auto
  }

  [hidden]:where(:not([hidden=until-found])) {
    display: none
  }

  .pointer-events-none {
    pointer-events: none
  }

  .fixed {
    position: fixed
  }

  .absolute {
    position: absolute
  }

  .relative {
    position: relative
  }

  .inset-0 {
    inset: 0
  }

  .-right-4 {
    right: -1rem
  }

  .bottom-0 {
    bottom: 0
  }

  .bottom-32 {
    bottom: 8rem
  }

  .bottom-8 {
    bottom: 2rem
  }

  .left-0 {
    left: 0
  }

  .left-1\/2 {
    left: 50%
  }

  .left-1\/3 {
    left: 33.333333%
  }

  .left-10 {
    left: 2.5rem
  }

  .right-0 {
    right: 0
  }

  .right-16 {
    right: 4rem
  }

  .right-4 {
    right: 1rem
  }

  .top-0 {
    top: 0
  }

  .top-1\/2 {
    top: 50%
  }

  .top-20 {
    top: 5rem
  }

  .top-4 {
    top: 1rem
  }

  .z-0 {
    z-index: 0
  }

  .z-10 {
    z-index: 10
  }

  .z-50 {
    z-index: 50
  }

  .mx-auto {
    margin-left: auto;
    margin-right: auto
  }

  .mb-1 {
    margin-bottom: .25rem
  }

  .mb-10 {
    margin-bottom: 2.5rem
  }

  .mb-12 {
    margin-bottom: 3rem
  }

  .mb-16 {
    margin-bottom: 4rem
  }

  .mb-2 {
    margin-bottom: .5rem
  }

  .mb-3 {
    margin-bottom: .75rem
  }

  .mb-4 {
    margin-bottom: 1rem
  }

  .mb-6 {
    margin-bottom: 1.5rem
  }

  .mb-8 {
    margin-bottom: 2rem
  }

  .ml-3 {
    margin-left: .75rem
  }

  .mr-2 {
    margin-right: .5rem
  }

  .mr-3 {
    margin-right: .75rem
  }

  .mr-4 {
    margin-right: 1rem
  }

  .mt-1 {
    margin-top: .25rem
  }

  .mt-12 {
    margin-top: 3rem
  }

  .mt-2 {
    margin-top: .5rem
  }

  .mt-4 {
    margin-top: 1rem
  }

  .mt-6 {
    margin-top: 1.5rem
  }

  .block {
    display: block
  }

  .inline-block {
    display: inline-block
  }

  .flex {
    display: flex
  }

  .inline-flex {
    display: inline-flex
  }

  .grid {
    display: grid
  }

  .hidden {
    display: none
  }

  .aspect-video {
    aspect-ratio: 16 / 9
  }

  .h-0\.5 {
    height: .125rem
  }

  .h-10 {
    height: 2.5rem
  }

  .h-12 {
    height: 3rem
  }

  .h-14 {
    height: 3.5rem
  }

  .h-16 {
    height: 4rem
  }

  .h-2 {
    height: .5rem
  }

  .h-20 {
    height: 5rem
  }

  .h-24 {
    height: 6rem
  }

  .h-3 {
    height: .75rem
  }

  .h-32 {
    height: 8rem
  }

  .h-48 {
    height: 12rem
  }

  .h-6 {
    height: 1.5rem
  }

  .h-full {
    height: 100%
  }

  .h-screen {
    height: 100vh
  }

  .min-h-screen {
    min-height: 100vh
  }

  .w-1 {
    width: .25rem
  }

  .w-10 {
    width: 2.5rem
  }

  .w-12 {
    width: 3rem
  }

  .w-14 {
    width: 3.5rem
  }

  .w-16 {
    width: 4rem
  }

  .w-2 {
    width: .5rem
  }

  .w-20 {
    width: 5rem
  }

  .w-24 {
    width: 6rem
  }

  .w-32 {
    width: 8rem
  }

  .w-48 {
    width: 12rem
  }

  .w-6 {
    width: 1.5rem
  }

  .w-8 {
    width: 2rem
  }

  .w-full {
    width: 100%
  }

  .w-px {
    width: 1px
  }

  .max-w-2xl {
    max-width: 42rem
  }

  .max-w-3xl {
    max-width: 48rem
  }

  .max-w-4xl {
    max-width: 56rem
  }

  .max-w-5xl {
    max-width: 64rem
  }

  .max-w-7xl {
    max-width: 80rem
  }

  .flex-1 {
    flex: 1 1 0%
  }

  .flex-shrink-0 {
    flex-shrink: 0
  }

  .grow {
    flex-grow: 1
  }

  .-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  @keyframes bounce {

    0%,
    to {
      transform: translateY(-25%);
      animation-timing-function: cubic-bezier(.8, 0, 1, 1)
    }

    50% {
      transform: none;
      animation-timing-function: cubic-bezier(0, 0, .2, 1)
    }
  }

  .animate-bounce {
    animation: bounce 1s infinite
  }

  @keyframes pulse {
    50% {
      opacity: .5
    }
  }

  .animate-pulse {
    animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite
  }

  .cursor-not-allowed {
    cursor: not-allowed
  }

  .cursor-pointer {
    cursor: pointer
  }

  .select-none {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
  }

  .resize-none {
    resize: none
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .flex-col {
    flex-direction: column
  }

  .flex-wrap {
    flex-wrap: wrap
  }

  .items-start {
    align-items: flex-start
  }

  .items-center {
    align-items: center
  }

  .justify-center {
    justify-content: center
  }

  .justify-between {
    justify-content: space-between
  }

  .gap-1 {
    gap: .25rem
  }

  .gap-12 {
    gap: 3rem
  }

  .gap-2 {
    gap: .5rem
  }

  .gap-3 {
    gap: .75rem
  }

  .gap-4 {
    gap: 1rem
  }

  .gap-6 {
    gap: 1.5rem
  }

  .gap-8 {
    gap: 2rem
  }

  .space-x-2>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(.5rem * var(--tw-space-x-reverse));
    margin-left: calc(.5rem * calc(1 - var(--tw-space-x-reverse)))
  }

  .space-x-3>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(.75rem * var(--tw-space-x-reverse));
    margin-left: calc(.75rem * calc(1 - var(--tw-space-x-reverse)))
  }

  .space-x-4>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)))
  }

  .space-x-6>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1.5rem * var(--tw-space-x-reverse));
    margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)))
  }

  .space-x-8>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(2rem * var(--tw-space-x-reverse));
    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)))
  }

  .space-y-2>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.5rem * var(--tw-space-y-reverse))
  }

  .space-y-3>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.75rem * var(--tw-space-y-reverse))
  }

  .space-y-6>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse))
  }

  .space-y-8>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(2rem * var(--tw-space-y-reverse))
  }

  .overflow-hidden {
    overflow: hidden
  }

  .whitespace-nowrap {
    white-space: nowrap
  }

  .rounded {
    border-radius: .25rem
  }

  .rounded-2xl {
    border-radius: 1rem
  }

  .rounded-full {
    border-radius: 9999px
  }

  .rounded-lg {
    border-radius: .5rem
  }

  .rounded-xl {
    border-radius: .75rem
  }

  .border {
    border-width: 1px
  }

  .border-0 {
    border-width: 0px
  }

  .border-2 {
    border-width: 2px
  }

  .border-l-4 {
    border-left-width: 4px
  }

  .border-t {
    border-top-width: 1px
  }

  .border-amber-200 {
    --tw-border-opacity: 1;
    border-color: rgb(253 230 138 / var(--tw-border-opacity, 1))
  }

  .border-amber-500 {
    --tw-border-opacity: 1;
    border-color: rgb(245 158 11 / var(--tw-border-opacity, 1))
  }

  .border-amber-500\/30 {
    border-color: #f59e0b4d
  }

  .border-blue-100 {
    --tw-border-opacity: 1;
    border-color: rgb(219 234 254 / var(--tw-border-opacity, 1))
  }

  .border-blue-200 {
    --tw-border-opacity: 1;
    border-color: rgb(191 219 254 / var(--tw-border-opacity, 1))
  }

  .border-blue-500 {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1))
  }

  .border-blue-600 {
    --tw-border-opacity: 1;
    border-color: rgb(37 99 235 / var(--tw-border-opacity, 1))
  }

  .border-gray-200 {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1))
  }

  .border-gray-300 {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1))
  }

  .border-gray-800 {
    --tw-border-opacity: 1;
    border-color: rgb(31 41 55 / var(--tw-border-opacity, 1))
  }

  .border-green-200 {
    --tw-border-opacity: 1;
    border-color: rgb(187 247 208 / var(--tw-border-opacity, 1))
  }

  .border-green-500 {
    --tw-border-opacity: 1;
    border-color: rgb(34 197 94 / var(--tw-border-opacity, 1))
  }

  .border-orange-500 {
    --tw-border-opacity: 1;
    border-color: rgb(249 115 22 / var(--tw-border-opacity, 1))
  }

  .border-purple-500 {
    --tw-border-opacity: 1;
    border-color: rgb(168 85 247 / var(--tw-border-opacity, 1))
  }

  .border-red-500 {
    --tw-border-opacity: 1;
    border-color: rgb(239 68 68 / var(--tw-border-opacity, 1))
  }

  .border-slate-200 {
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1))
  }

  .border-white {
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1))
  }

  .border-white\/20 {
    border-color: #fff3
  }

  .border-white\/30 {
    border-color: #ffffff4d
  }

  .bg-amber-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1))
  }

  .bg-amber-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1))
  }

  .bg-amber-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1))
  }

  .bg-amber-500\/10 {
    background-color: #f59e0b1a
  }

  .bg-amber-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1))
  }

  .bg-black\/10 {
    background-color: #0000001a
  }

  .bg-black\/20 {
    background-color: #0003
  }

  .bg-black\/50 {
    background-color: #00000080
  }

  .bg-blue-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1))
  }

  .bg-blue-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1))
  }

  .bg-blue-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1))
  }

  .bg-blue-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1))
  }

  .bg-blue-700\/50 {
    background-color: #1d4ed880
  }

  .bg-emerald-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1))
  }

  .bg-emerald-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1))
  }

  .bg-emerald-500\/10 {
    background-color: #10b9811a
  }

  .bg-emerald-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1))
  }

  .bg-gray-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1))
  }

  .bg-gray-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1))
  }

  .bg-gray-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1))
  }

  .bg-gray-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1))
  }

  .bg-green-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1))
  }

  .bg-green-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1))
  }

  .bg-green-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1))
  }

  .bg-purple-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1))
  }

  .bg-purple-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1))
  }

  .bg-slate-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1))
  }

  .bg-teal-500\/10 {
    background-color: #14b8a61a
  }

  .bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
  }

  .bg-white\/10 {
    background-color: #ffffff1a
  }

  .bg-white\/20 {
    background-color: #fff3
  }

  .bg-white\/30 {
    background-color: #ffffff4d
  }

  .bg-white\/5 {
    background-color: #ffffff0d
  }

  .bg-white\/60 {
    background-color: #fff9
  }

  .bg-white\/95 {
    background-color: #fffffff2
  }

  .bg-gradient-to-b {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops))
  }

  .bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops))
  }

  .bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops))
  }

  .bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops))
  }

  .from-amber-50 {
    --tw-gradient-from: #fffbeb var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 251 235 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
  }

  .from-amber-500\/20 {
    --tw-gradient-from: rgb(245 158 11 / .2) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
  }

  .from-blue-50 {
    --tw-gradient-from: #eff6ff var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
  }

  .from-blue-500 {
    --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
  }

  .from-blue-600 {
    --tw-gradient-from: #2563eb var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
  }

  .from-cyan-400 {
    --tw-gradient-from: #22d3ee var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(34 211 238 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
  }

  .from-emerald-400 {
    --tw-gradient-from: #34d399 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(52 211 153 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
  }

  .from-emerald-500 {
    --tw-gradient-from: #10b981 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
  }

  .from-emerald-600 {
    --tw-gradient-from: #059669 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(5 150 105 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
  }

  .from-gray-900 {
    --tw-gradient-from: #111827 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
  }

  .from-green-50 {
    --tw-gradient-from: #f0fdf4 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(240 253 244 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
  }

  .from-purple-50 {
    --tw-gradient-from: #faf5ff var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(250 245 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
  }

  .from-purple-500 {
    --tw-gradient-from: #a855f7 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
  }

  .from-slate-50 {
    --tw-gradient-from: #f8fafc var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(248 250 252 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
  }

  .from-slate-900\/85 {
    --tw-gradient-from: rgb(15 23 42 / .85) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
  }

  .from-slate-900\/90 {
    --tw-gradient-from: rgb(15 23 42 / .9) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
  }

  .from-teal-400 {
    --tw-gradient-from: #2dd4bf var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(45 212 191 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
  }

  .from-transparent {
    --tw-gradient-from: transparent var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
  }

  .via-gray-400 {
    --tw-gradient-to: rgb(156 163 175 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #9ca3af var(--tw-gradient-via-position), var(--tw-gradient-to)
  }

  .via-slate-800\/70 {
    --tw-gradient-to: rgb(30 41 59 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(30 41 59 / .7) var(--tw-gradient-via-position), var(--tw-gradient-to)
  }

  .via-teal-400 {
    --tw-gradient-to: rgb(45 212 191 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #2dd4bf var(--tw-gradient-via-position), var(--tw-gradient-to)
  }

  .via-transparent {
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to)
  }

  .to-amber-100 {
    --tw-gradient-to: #fef3c7 var(--tw-gradient-to-position)
  }

  .to-amber-400 {
    --tw-gradient-to: #fbbf24 var(--tw-gradient-to-position)
  }

  .to-blue-100 {
    --tw-gradient-to: #dbeafe var(--tw-gradient-to-position)
  }

  .to-blue-50 {
    --tw-gradient-to: #eff6ff var(--tw-gradient-to-position)
  }

  .to-blue-700 {
    --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position)
  }

  .to-blue-800 {
    --tw-gradient-to: #1e40af var(--tw-gradient-to-position)
  }

  .to-cyan-400 {
    --tw-gradient-to: #22d3ee var(--tw-gradient-to-position)
  }

  .to-emerald-700 {
    --tw-gradient-to: #047857 var(--tw-gradient-to-position)
  }

  .to-emerald-900\/60 {
    --tw-gradient-to: rgb(6 78 59 / .6) var(--tw-gradient-to-position)
  }

  .to-gray-700 {
    --tw-gradient-to: #374151 var(--tw-gradient-to-position)
  }

  .to-green-100 {
    --tw-gradient-to: #dcfce7 var(--tw-gradient-to-position)
  }

  .to-orange-500\/20 {
    --tw-gradient-to: rgb(249 115 22 / .2) var(--tw-gradient-to-position)
  }

  .to-purple-100 {
    --tw-gradient-to: #f3e8ff var(--tw-gradient-to-position)
  }

  .to-purple-700 {
    --tw-gradient-to: #7e22ce var(--tw-gradient-to-position)
  }

  .to-teal-400 {
    --tw-gradient-to: #2dd4bf var(--tw-gradient-to-position)
  }

  .to-teal-600 {
    --tw-gradient-to: #0d9488 var(--tw-gradient-to-position)
  }

  .to-teal-700 {
    --tw-gradient-to: #0f766e var(--tw-gradient-to-position)
  }

  .to-transparent {
    --tw-gradient-to: transparent var(--tw-gradient-to-position)
  }

  .to-white {
    --tw-gradient-to: #fff var(--tw-gradient-to-position)
  }

  .bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text
  }

  .object-cover {
    -o-object-fit: cover;
    object-fit: cover
  }

  .object-center {
    -o-object-position: center;
    object-position: center
  }

  .p-10 {
    padding: 2.5rem
  }

  .p-4 {
    padding: 1rem
  }

  .p-6 {
    padding: 1.5rem
  }

  .p-8 {
    padding: 2rem
  }

  .px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem
  }

  .px-2 {
    padding-left: .5rem;
    padding-right: .5rem
  }

  .px-3 {
    padding-left: .75rem;
    padding-right: .75rem
  }

  .px-4 {
    padding-left: 1rem;
    padding-right: 1rem
  }

  .px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
  }

  .px-8 {
    padding-left: 2rem;
    padding-right: 2rem
  }

  .py-1 {
    padding-top: .25rem;
    padding-bottom: .25rem
  }

  .py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem
  }

  .py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem
  }

  .py-2 {
    padding-top: .5rem;
    padding-bottom: .5rem
  }

  .py-2\.5 {
    padding-top: .625rem;
    padding-bottom: .625rem
  }

  .py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem
  }

  .py-3 {
    padding-top: .75rem;
    padding-bottom: .75rem
  }

  .py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem
  }

  .py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem
  }

  .pb-16 {
    padding-bottom: 4rem
  }

  .pl-6 {
    padding-left: 1.5rem
  }

  .pl-8 {
    padding-left: 2rem
  }

  .pt-32 {
    padding-top: 8rem
  }

  .pt-4 {
    padding-top: 1rem
  }

  .pt-8 {
    padding-top: 2rem
  }

  .text-center {
    text-align: center
  }

  .font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace
  }

  .text-2xl {
    font-size: 1.5rem;
    line-height: 2rem
  }

  .text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem
  }

  .text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem
  }

  .text-5xl {
    font-size: 3rem;
    line-height: 1
  }

  .text-6xl {
    font-size: 3.75rem;
    line-height: 1
  }

  .text-9xl {
    font-size: 8rem;
    line-height: 1
  }

  .text-base {
    font-size: 1rem;
    line-height: 1.5rem
  }

  .text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem
  }

  .text-sm {
    font-size: .875rem;
    line-height: 1.25rem
  }

  .text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem
  }

  .text-xs {
    font-size: .75rem;
    line-height: 1rem
  }

  .font-black {
    font-weight: 900
  }

  .font-bold {
    font-weight: 700
  }

  .font-light {
    font-weight: 300
  }

  .font-medium {
    font-weight: 500
  }

  .font-semibold {
    font-weight: 600
  }

  .italic {
    font-style: italic
  }

  .leading-relaxed {
    line-height: 1.625
  }

  .leading-tight {
    line-height: 1.25
  }

  .text-amber-300 {
    --tw-text-opacity: 1;
    color: rgb(252 211 77 / var(--tw-text-opacity, 1))
  }

  .text-amber-400 {
    --tw-text-opacity: 1;
    color: rgb(251 191 36 / var(--tw-text-opacity, 1))
  }

  .text-amber-600 {
    --tw-text-opacity: 1;
    color: rgb(217 119 6 / var(--tw-text-opacity, 1))
  }

  .text-amber-800 {
    --tw-text-opacity: 1;
    color: rgb(146 64 14 / var(--tw-text-opacity, 1))
  }

  .text-blue-100 {
    --tw-text-opacity: 1;
    color: rgb(219 234 254 / var(--tw-text-opacity, 1))
  }

  .text-blue-50 {
    --tw-text-opacity: 1;
    color: rgb(239 246 255 / var(--tw-text-opacity, 1))
  }

  .text-blue-600 {
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1))
  }

  .text-blue-700 {
    --tw-text-opacity: 1;
    color: rgb(29 78 216 / var(--tw-text-opacity, 1))
  }

  .text-cyan-400 {
    --tw-text-opacity: 1;
    color: rgb(34 211 238 / var(--tw-text-opacity, 1))
  }

  .text-emerald-400 {
    --tw-text-opacity: 1;
    color: rgb(52 211 153 / var(--tw-text-opacity, 1))
  }

  .text-emerald-600 {
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1))
  }

  .text-emerald-700 {
    --tw-text-opacity: 1;
    color: rgb(4 120 87 / var(--tw-text-opacity, 1))
  }

  .text-gray-200 {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1))
  }

  .text-gray-300 {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1))
  }

  .text-gray-400 {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1))
  }

  .text-gray-50 {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1))
  }

  .text-gray-500 {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1))
  }

  .text-gray-600 {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1))
  }

  .text-gray-700 {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1))
  }

  .text-gray-800 {
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1))
  }

  .text-gray-900 {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1))
  }

  .text-green-600 {
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity, 1))
  }

  .text-green-700 {
    --tw-text-opacity: 1;
    color: rgb(21 128 61 / var(--tw-text-opacity, 1))
  }

  .text-orange-500 {
    --tw-text-opacity: 1;
    color: rgb(249 115 22 / var(--tw-text-opacity, 1))
  }

  .text-orange-600 {
    --tw-text-opacity: 1;
    color: rgb(234 88 12 / var(--tw-text-opacity, 1))
  }

  .text-purple-600 {
    --tw-text-opacity: 1;
    color: rgb(147 51 234 / var(--tw-text-opacity, 1))
  }

  .text-purple-700 {
    --tw-text-opacity: 1;
    color: rgb(126 34 206 / var(--tw-text-opacity, 1))
  }

  .text-red-500 {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1))
  }

  .text-red-600 {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1))
  }

  .text-teal-400 {
    --tw-text-opacity: 1;
    color: rgb(45 212 191 / var(--tw-text-opacity, 1))
  }

  .text-transparent {
    color: transparent
  }

  .text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
  }

  .text-white\/30 {
    color: #ffffff4d
  }

  .text-white\/90 {
    color: #ffffffe6
  }

  .text-white\/95 {
    color: #fffffff2
  }

  .accent-blue-600 {
    accent-color: #2563eb
  }

  .opacity-0 {
    opacity: 0
  }

  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
  }

  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
  }

  .shadow-md {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
  }

  .shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
  }

  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
  }

  .blur-2xl {
    --tw-blur: blur(40px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
  }

  .blur-3xl {
    --tw-blur: blur(64px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
  }

  .drop-shadow-2xl {
    --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / .15));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
  }

  .drop-shadow-lg {
    --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / .04)) drop-shadow(0 4px 3px rgb(0 0 0 / .1));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
  }

  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(4px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
  }

  .transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
  }

  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
  }

  .transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
  }

  .transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
  }

  .delay-1000 {
    transition-delay: 1s
  }

  .delay-500 {
    transition-delay: .5s
  }

  .duration-300 {
    transition-duration: .3s
  }

  .hover\:scale-105:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .hover\:border-b:hover {
    border-bottom-width: 1px
  }

  .hover\:border-gray-100:hover {
    --tw-border-opacity: 1;
    border-color: rgb(243 244 246 / var(--tw-border-opacity, 1))
  }

  .hover\:bg-amber-400:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1))
  }

  .hover\:bg-blue-50:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1))
  }

  .hover\:bg-blue-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1))
  }

  .hover\:bg-gray-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1))
  }

  .hover\:bg-gray-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1))
  }

  .hover\:bg-gray-800:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1))
  }

  .hover\:bg-slate-200:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1))
  }

  .hover\:bg-white:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
  }

  .hover\:bg-white\/10:hover {
    background-color: #ffffff1a
  }

  .hover\:bg-white\/95:hover {
    background-color: #fffffff2
  }

  .hover\:from-emerald-600:hover {
    --tw-gradient-from: #059669 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(5 150 105 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
  }

  .hover\:to-teal-700:hover {
    --tw-gradient-to: #0f766e var(--tw-gradient-to-position)
  }

  .hover\:text-blue-600:hover {
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1))
  }

  .hover\:text-blue-700:hover {
    --tw-text-opacity: 1;
    color: rgb(29 78 216 / var(--tw-text-opacity, 1))
  }

  .hover\:text-gray-900:hover {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1))
  }

  .hover\:text-white:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
  }

  .hover\:shadow-2xl:hover {
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
  }

  .hover\:shadow-lg:hover {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
  }

  .hover\:shadow-xl:hover {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
  }

  .hover\:shadow-emerald-500\/25:hover {
    --tw-shadow-color: rgb(16 185 129 / .25);
    --tw-shadow: var(--tw-shadow-colored)
  }

  .hover\:backdrop-blur-sm:hover {
    --tw-backdrop-blur: blur(4px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
  }

  .focus\:border-transparent:focus {
    border-color: transparent
  }

  .focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px
  }

  .focus\:ring-2:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
  }

  .focus\:ring-blue-600:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity, 1))
  }

  .focus\:ring-white:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1))
  }

  .group:hover .group-hover\:translate-x-1 {
    --tw-translate-x: .25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .group:hover .group-hover\:scale-105 {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .group:hover .group-hover\:scale-110 {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .group:hover .group-hover\:opacity-100 {
    opacity: 1
  }

  .group:hover .group-hover\:shadow-xl {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
  }

  @media(min-width: 640px) {
    .sm\:block {
      display: block
    }

    .sm\:flex-row {
      flex-direction: row
    }
  }

  @media(min-width: 768px) {
    .md\:mb-0 {
      margin-bottom: 0
    }

    .md\:block {
      display: block
    }

    .md\:flex {
      display: flex
    }

    .md\:-translate-y-4 {
      --tw-translate-y: -1rem;
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .md\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .md\:grid-cols-7 {
      grid-template-columns: repeat(7, minmax(0, 1fr))
    }

    .md\:flex-row {
      flex-direction: row
    }

    .md\:text-2xl {
      font-size: 1.5rem;
      line-height: 2rem
    }

    .md\:text-5xl {
      font-size: 3rem;
      line-height: 1
    }

    .md\:text-6xl {
      font-size: 3.75rem;
      line-height: 1
    }

    .md\:text-8xl {
      font-size: 6rem;
      line-height: 1
    }

    .md\:text-\[12rem\] {
      font-size: 12rem
    }

    .md\:text-xl {
      font-size: 1.25rem;
      line-height: 1.75rem
    }
  }

  @media(min-width: 1024px) {
    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr))
    }
  }

  /* FinancialEducationCustom.css */
  /* Custom styles to override Bootstrap and add unique styles */

  .fin-edu-container {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  }

  /* Hero Section Custom Styles */
  .hero-edu-section {
    background: linear-gradient(135deg, #f0f9ff 0%, #f3f4f6 100%);
  }

  .hero-edu-title {
    color: #1e3a8a;
    font-weight: 800;
  }

  .hero-edu-subtitle {
    color: #4b535d;
    font-size: 20px;
    font-weight: 400;
    font-family: '__nextjs-Geist';
  }

  /* Feature Cards Custom Styles */
  .feature-edu-card {
    background: white;
    border-radius: 1rem;
    border: 1px solid #f3f4f6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .feature-edu-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  }

  .feature-edu-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .blue-edu-icon {
    background-color: #dbeafe;
  }

  .green-edu-icon {
    background-color: #d1fae5;
  }

  .purple-edu-icon {
    background-color: #f3e8ff;
  }

  .amber-edu-icon {
    background-color: #fef3c7;
  }

  .icon-edu-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
  }

  .blue-edu-icon .icon-edu-dot {
    background-color: #2563eb;
  }

  .green-edu-icon .icon-edu-dot {
    background-color: #10b981;
  }

  .purple-edu-icon .icon-edu-dot {
    background-color: #8b5cf6;
  }

  .amber-edu-icon .icon-edu-dot {
    background-color: #f59e0b;
  }

  .feature-edu-title {
    color: #111827;
  }

  .feature-edu-desc {
    color: #6b7280;
    line-height: 1.5;
  }

  /* Section Container */
  .section-edu-header {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  .section-edu-title {
    position: relative;
    display: inline-block;
  }

  .blue-edu-title {
    color: #000000;
  }

  .green-edu-title {
    color: #065f46;
  }

  .green-edu-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #10b981, #34d399);
    border-radius: 2px;
  }

  .section-edu-desc {
    color: #4b5563;
  }

  /* Education Cards */
  .education-edu-card {
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .education-edu-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  }

  .blue-edu-card {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-color: #bae6fd;
  }

  .green-edu-card {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: #bbf7d0;
  }

  .card-edu-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .blue-edu-card-icon {
    background-color: #bfdbfe;
  }

  .green-edu-card-icon {
    background-color: #a7f3d0;
  }

  .card-edu-icon-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
  }

  .blue-edu-card-icon .card-edu-icon-dot {
    background-color: #1d4ed8;
  }

  .green-edu-card-icon .card-edu-icon-dot {
    background-color: #059669;
  }

  .card-edu-title {
    color: #1e40af;
  }

  .green-edu-card .card-edu-title {
    color: #065f46;
  }

  .card-edu-list-item {
    color: #374151;
    font-size: 0.875rem;
    display: flex;
    align-items: flex-start;
  }

  .list-edu-bullet {
    margin-top: 0.125rem;
  }

  .blue-edu-bullet {
    color: #3b82f6;
  }

  .green-edu-bullet {
    color: #10b981;
  }

  /* Approach Cards */
  .approach-edu-card {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .approach-edu-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  }

  .step-edu-number {
    color: #2563eb;
    opacity: 0.2;
    font-weight: 800;
  }

  .approach-edu-title {
    color: #111827;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: '__nextjs-Geist';
  }

  .approach-edu-desc {
    color: #6b7280;
    line-height: 1.5;
    font-size: 0.875rem;
    text-align: left;
  }

  /* Journey Section */
  .journey-edu-section {
    background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 100%);
  }

  .journey-edu-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    transition: all 0.2s ease;
  }

  .journey-edu-card:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
  }

  .journey-edu-step {
    color: #93c5fd;
  }

  .journey-edu-step-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #33329f;
    border-radius: 7px;
    padding: 5px 15px;
    margin: 10px 0px;
    font-size: 16px;
  }

  .journey-edu-step-desc {
    color: #bfdbfe;
    font-size: 0.875rem;
  }

  /* CTA Section */
  .cta-edu-title {
    color: #111827;
  }

  .cta-edu-btn {
    border-radius: 0.75rem;
    font-weight: 600;
    min-width: 160px;
    transition: all 0.2s ease;
  }

  .cta-edu-btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    color: white;
  }

  .cta-edu-btn-primary:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3);
    color: white;
  }

  .cta-edu-btn-secondary {
    background: white;
    color: #3b82f6;
    border: 2px solid #3b82f6;
  }

  .cta-edu-btn-secondary:hover {
    background: #f8fafc;
    border-color: #2563eb;
    color: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.1);
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
    .hero-edu-title {
      font-size: 2.5rem;
    }

    .hero-edu-subtitle {
      font-size: 1.125rem;
    }

    .section-edu-title {
      font-size: 2rem;
    }

    .cta-edu-title {
      font-size: 2rem;
    }
  }

  @media (max-width: 576px) {
    .hero-edu-title {
      font-size: 2rem;
    }

    .hero-edu-subtitle {
      font-size: 1rem;
    }

    .section-edu-title {
      font-size: 1.75rem;
    }

    .cta-edu-title {
      font-size: 1.75rem;
    }

    .feature-edu-card,
    .education-edu-card,
    .approach-edu-card,
    .journey-edu-card {
      padding: 1.25rem !important;
    }
  }

  /* CommunitySection.css */
  .community-learn-section {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #333;
    background-color: #fff;
    line-height: 1.6;
  }

  /* Hero Section */
  .community-header-section {
    padding: 60px 0 40px;
    background-color: #fff;
  }

  .community-main-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 20px;
    text-align: center;
  }

  .community-main-title1 {
    font-size: 2.2rem;
    font-weight: 700;
    padding-bottom: 0.5rem;
    text-align: center;
  }

  .community-subtitle {
    font-size: 1.125rem;
    color: #4a5568;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    line-height: 1.7;
  }

  .community-subtitle1 {
    color: #000;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px !important;
  }

  .Recent-Discussions {
    padding: 45px 0px;
  }

  .shado-none {
    box-shadow: none;
    background: transparent;
  }

  .section-divider {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 40px auto;
    max-width: 1200px;
  }

  /* Community Features */
  .community-features-block {
    padding: 40px 0;
    background-color: #fff;
  }

  .features-section-title {
    font-size: 2rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 10px;
  }

  .features-section-desc {
    font-size: 1.125rem;
    color: #4a5568;
    margin-bottom: 30px;
  }

  .feature-detail-card {
    padding: 20px;
    border-left: 4px solid #4299e1;
    background-color: #f8fafc;
    border-radius: 0 8px 8px 0;
    margin-bottom: 15px;
  }

  .feature-item-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 10px;
  }

  .feature-item-text {
    font-size: 1rem;
    color: #4a5568;
    line-height: 1.6;
    margin-bottom: 0;
  }

  /* Structured Community Learning */
  .structured-community-section {
    padding: 40px 0;
    background-color: #fff;
  }

  .structured-main-title {
    font-size: 2rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 20px;
  }

  .learning-step-card {
    padding: 20px;
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 15px;
  }

  .step-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #4299e1;
    color: white;
    border-radius: 50%;
    font-weight: 600;
    font-size: 14px;
    margin-right: 15px;
    flex-shrink: 0;
  }

  .step-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .step-description {
    font-size: 1rem;
    color: #4a5568;
    margin-left: 47px;
    line-height: 1.6;
    margin-bottom: 0;
    margin-left: 0;
  }

  /* Community Stats Table */
  .community-stats-wrapper {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 25px;
  }

  .stats-table-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 20px;
    text-align: center;
  }

  .community-stats-table {
    width: 100%;
    border-collapse: collapse;
  }

  .community-stats-table thead {
    border-bottom: 2px solid #e2e8f0;
  }

  .community-stats-table th {
    padding: 12px 8px;
    font-weight: 600;
    color: #4a5568;
    text-align: left;
    font-size: 0.9rem;
    white-space: nowrap;
  }

  .community-stats-table td {
    padding: 12px 8px;
    color: #1a202c;
    font-size: 1rem;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
  }

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

  .community-stats-table td:first-child {
    font-weight: 700;
    color: #2d3748;
  }

  /* Recent Discussions */
  .recent-discussions-section {
    padding: 40px 0;
    background-color: #fff;
  }

  .discussions-section-title {
    font-size: 2rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 20px;
  }

  .discussion-item-card {
    padding: 18px;
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
  }

  .discussion-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
  }

  .discussion-author-name {
    font-size: 1rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 0;
  }

  .discussion-meta {
    font-size: 0.875rem;
    color: #718096;
    background-color: #f7fafc;
    padding: 4px 10px;
    border-radius: 4px;
  }

  .discussion-topic-text {
    font-size: 0.95rem;
    color: #4a5568;
    margin-bottom: 0;
    line-height: 1.5;
  }

  /* Upcoming Events */
  .upcoming-events-section {
    padding: 40px 0;
    background-color: #fff;
  }

  .events-section-title {
    font-size: 2rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 20px;
  }

  .event-item-card {
    padding: 18px;
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
  }

  .event-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
  }

  .event-name {
    font-size: 1rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 0;
  }

  .event-days {
    font-size: 0.875rem;
    color: white;
    background-color: #4299e1;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 600;
  }

  .event-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .event-schedule,
  .event-subtitle,
  .event-duration {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .event-icon {
    font-size: 0.9rem;
    color: #718096;
    width: 16px;
    text-align: center;
  }

  .event-time,
  .event-subject,
  .event-hours {
    font-size: 0.9rem;
    color: #4a5568;
  }

  /* Community Guidelines */
  .guidelines-section {
    padding: 40px 0;
    background-color: #fff;
  }

  .guidelines-main-title {
    font-size: 2rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 10px;
  }

  .guidelines-subtitle {
    font-size: 1.125rem;
    color: #4a5568;
    margin-bottom: 25px;
  }

  .guidelines-list {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 25px;
  }

  .guideline-item {
    margin-bottom: 15px;
  }

  .guideline-item:last-child {
    margin-bottom: 0;
  }

  .guideline-point {
    font-size: 1rem;
    color: #4a5568;
    line-height: 1.6;
  }

  .guideline-point strong {
    color: #1a202c;
  }

  /* CTA Section */
  .community-join-section {
    padding: 60px 0;
    background-color: #f8fafc;
    text-align: center;
  }

  .join-section-title {
    font-size: 2rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 20px;
  }

  .join-section-text {
    font-size: 1.125rem;
    color: #4a5568;
    max-width: 600px;
    margin: 0 auto 30px;
    line-height: 1.7;
  }

  /* Responsive Design */
  @media (max-width: 768px) {
    .community-main-title {
      font-size: 2rem;
    }

    .community-subtitle {
      font-size: 1rem;
    }

    .features-section-title,
    .structured-main-title,
    .discussions-section-title,
    .events-section-title,
    .guidelines-main-title,
    .join-section-title {
      font-size: 1.75rem;
    }

    .community-stats-table {
      font-size: 0.85rem;
    }

    .community-stats-table th,
    .community-stats-table td {
      padding: 8px 6px;
    }

    .discussion-header,
    .event-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }

    .discussion-meta,
    .event-days {
      align-self: flex-start;
    }
  }

  @media (max-width: 576px) {
    .community-header-section {
      padding: 40px 0 30px;
    }

    .community-features-block,
    .structured-community-section,
    .recent-discussions-section,
    .upcoming-events-section,
    .guidelines-section {
      padding: 30px 0;
    }

    .community-join-section {
      padding: 40px 0;
    }

    .feature-detail-card,
    .learning-step-card,
    .discussion-item-card,
    .event-item-card {
      padding: 15px;
    }

    .community-stats-wrapper {
      padding: 20px;
    }

    .guidelines-list {
      padding: 20px;
    }
  }

  /* FinancialEducation.css */
  :root {
    --financial-primary-blue: #1a237e;
    --financial-secondary-blue: #283593;
    --financial-accent-blue: #3949ab;
    --financial-light-blue: #e8eaf6;
    --financial-dark-gray: #333333;
    --financial-medium-gray: #666666;
    --financial-light-gray: #f5f5f5;
    --financial-border-color: #e0e0e0;
    --financial-success-green: #2e7d32;
    --financial-warning-orange: #f57c00;
  }

  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--financial-dark-gray);
    line-height: 1.6;
  }

  /* Hero Section */
  .financial-hero-section {
    background-color: var(--financial-light-blue);
    padding: 3rem 0 !important;
    margin-top: 70px;
  }

  .financial-hero-title {
    color: var(--financial-primary-blue);
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
  }

  .financial-hero-subtitle {
    color: var(--financial-medium-gray);
    font-size: 1.2rem;
    max-width: 800px;
  }

  .financial-section-divider {
    border: none;
    height: 2px;
    background-color: var(--financial-border-color);
    margin: 3rem 0;
  }

  /* Features Section */
  .financial-features-heading {
    color: var(--financial-primary-blue);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
  }

  .financial-features-description {
    color: var(--financial-medium-gray);
    font-size: 1.1rem;
    margin-bottom: 2rem;
  }

  .financial-feature-card {
    background-color: white;
    border-left: 4px solid var(--financial-accent-blue);
    border-radius: 0 8px 8px 0;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
  }

  .financial-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  }

  .financial-feature-icon {
    font-size: 1.8rem;
  }

  .financial-feature-header {
    display: flex;
    align-items: center;
  }

  .financial-feature-title {
    color: var(--financial-primary-blue);
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
  }

  .financial-feature-content {
    color: var(--financial-medium-gray);
    margin-bottom: 0;
  }

  /* Learning Process Section */
  .financial-process-heading {
    color: var(--financial-primary-blue);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
  }

  .financial-process-step {
    background-color: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border-top: 4px solid var(--financial-accent-blue);
  }

  .financial-step-indicator {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
  }

  .financial-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: var(--financial-accent-blue);
    color: white;
    border-radius: 50%;
    font-weight: 700;
    margin-right: 1rem;
    font-size: 1.1rem;
  }

  .financial-step-title {
    color: var(--financial-primary-blue);
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0;
  }

  .financial-step-description {
    color: var(--financial-medium-gray);
    margin-left: 3rem;
  }

  /* Community Statistics Card */
  .financial-community-stats-card {
    background-color: var(--financial-light-blue);
    border-radius: 8px;
    padding: 1.5rem;
  }

  .financial-stats-card-title {
    color: var(--financial-primary-blue);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
  }

  .financial-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  .financial-stat-card {
    background-color: white;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
  }

  .financial-stat-card:hover {
    transform: translateY(-2px);
  }

  .financial-stat-value-primary {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--financial-primary-blue);
    margin-bottom: 0.25rem;
  }

  .financial-stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--financial-medium-gray);
    margin-bottom: 0.25rem;
  }

  .financial-stat-label-primary {
    font-size: 0.9rem;
    color: var(--financial-primary-blue);
    font-weight: 600;
  }

  .financial-stat-label {
    font-size: 0.9rem;
    color: var(--financial-medium-gray);
  }

  /* Stats Breakdown */
  .financial-breakdown-title {
    color: var(--financial-primary-blue);
    font-size: 1.2rem;
    font-weight: 600;
  }

  .financial-breakdown-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  .financial-breakdown-item {
    text-align: center;
    flex: 1;
    min-width: 100px;
  }

  .financial-breakdown-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--financial-accent-blue);
    margin-bottom: 0.25rem;
  }

  .financial-breakdown-label {
    font-size: 0.9rem;
    color: var(--financial-medium-gray);
  }

  /* Discussions Section */
  .financial-discussions-heading {
    color: var(--financial-primary-blue);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
  }

  .financial-discussion-card {
    background-color: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border-left: 4px solid var(--financial-accent-blue);
    transition: transform 0.3s ease;
  }

  .financial-discussion-card:hover {
    transform: translateX(5px);
  }

  .financial-discussion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
  }

  .financial-discussion-author {
    color: var(--financial-primary-blue);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
  }

  .financial-discussion-meta {
    color: var(--financial-medium-gray);
    font-size: 0.9rem;
  }

  .financial-discussion-topic {
    color: var(--financial-dark-gray);
    margin: 0;
  }

  /* Events Section */
  .financial-events-heading {
    color: var(--financial-primary-blue);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
  }

  .financial-event-card {
    background-color: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border-left: 4px solid var(--financial-accent-blue);
    transition: transform 0.3s ease;
  }

  .financial-event-card:hover {
    transform: translateX(5px);
  }

  .financial-event-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
  }

  .financial-event-title {
    color: var(--financial-primary-blue);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
  }

  .financial-event-days {
    color: var(--financial-medium-gray);
    font-size: 0.9rem;
  }

  .financial-event-details {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.8rem;
  }

  .financial-event-schedule,
  .financial-event-subtitle,
  .financial-event-duration {
    display: flex;
    align-items: center;
    color: var(--financial-medium-gray);
  }

  .financial-event-icon {
    margin-right: 0.5rem;
    font-size: 1.1rem;
  }

  /* IMPROVED Guidelines Section */
  .financial-guidelines-section {
    background-color: var(--financial-light-blue);
    border-radius: 12px;
    margin: 2rem 0;
  }

  .financial-guidelines-heading {
    color: var(--financial-primary-blue);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
  }

  .financial-guidelines-subtitle {
    color: var(--financial-medium-gray);
    font-size: 1.3rem;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
  }

  .financial-guidelines-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
  }

  .financial-guideline-card {
    background-color: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: flex-start;
    transition: all 0.3s ease;
    border: 1px solid transparent;
  }

  .financial-guideline-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    border-color: var(--financial-accent-blue);
  }

  .financial-guideline-icon-wrapper {
    flex-shrink: 0;
    margin-right: 1.2rem;
  }

  .financial-guideline-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--financial-light-blue), var(--financial-accent-blue));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: white;
  }

  .financial-guideline-content-wrapper {
    flex: 1;
  }

  .financial-guideline-title {
    color: var(--financial-primary-blue);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
  }

  .financial-guideline-description {
    color: var(--financial-medium-gray);
    line-height: 1.6;
    margin: 0;
  }

  /* Learning Principles Card */
  .financial-learning-principles-card {
    background: linear-gradient(135deg, var(--financial-primary-blue), var(--financial-secondary-blue));
    border-radius: 16px;
    padding: 2.5rem;
    color: white;
    margin-top: 3rem;
  }

  .financial-principles-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    text-align: center;
  }

  .financial-principle-item {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
  }

  .financial-principle-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-3px);
  }

  .financial-principle-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
  }

  .financial-principle-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--financial-light-blue);
    margin-right: 1rem;
    opacity: 0.9;
  }

  .financial-principle-name {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0;
    color: white;
  }

  .financial-principle-text {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin: 0;
    padding-left: 2.5rem;
  }

  /* CTA Section */
  .financial-cta-section {
    background: linear-gradient(135deg, var(--financial-accent-blue), var(--financial-secondary-blue));
    border-radius: 16px;
    padding: 4rem 1rem;
    margin: 3rem 0;
    text-align: center;
  }

  .financial-cta-heading {
    color: white;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
  }

  .financial-cta-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.3rem;
    max-width: 600px;
    margin: 0 auto 2rem;
    line-height: 1.6;
  }

  .financial-cta-button {
    background-color: white;
    color: var(--financial-primary-blue);
    border: none;
    padding: 1rem 3rem;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
  }

  .financial-cta-button:hover {
    background-color: var(--financial-light-blue);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  }

  /* Responsive Design */
  @media (max-width: 992px) {
    .financial-guidelines-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .financial-learning-principles-card {
      padding: 2rem;
    }
  }

  @media (max-width: 768px) {
    .financial-hero-title {
      font-size: 2rem;
    }

    .financial-features-heading,
    .financial-process-heading,
    .financial-discussions-heading,
    .financial-events-heading,
    .financial-guidelines-heading,
    .financial-cta-heading {
      font-size: 1.7rem;
    }

    .financial-guidelines-heading,
    .financial-cta-heading {
      font-size: 2rem;
    }

    .financial-step-description {
      margin-left: 0;
      margin-top: 0.5rem;
    }

    .financial-discussion-header,
    .financial-event-header {
      flex-direction: column;
      align-items: flex-start;
    }

    .financial-discussion-meta,
    .financial-event-days {
      margin-top: 0.3rem;
    }

    .financial-event-details {
      flex-direction: column;
      gap: 0.5rem;
    }

    .financial-stats-grid {
      grid-template-columns: 1fr;
    }

    .financial-breakdown-grid {
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }

    .financial-breakdown-item {
      min-width: auto;
    }

    .financial-guidelines-grid {
      grid-template-columns: 1fr;
    }

    .financial-guideline-card {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .financial-guideline-icon-wrapper {
      margin-right: 0;
      margin-bottom: 1rem;
    }

    .financial-principle-header {
      flex-direction: column;
      text-align: center;
    }

    .financial-principle-number {
      margin-right: 0;
      margin-bottom: 0.5rem;
    }

    .financial-principle-text {
      padding-left: 0;
      text-align: center;
    }
  }

  @media (max-width: 576px) {
    .financial-hero-title {
      font-size: 1.7rem;
    }

    .financial-hero-subtitle,
    .financial-guidelines-subtitle,
    .financial-cta-description {
      font-size: 1rem;
    }

    .financial-feature-title,
    .financial-step-title,
    .financial-guideline-title {
      font-size: 1.2rem;
    }

    .financial-stat-value-primary,
    .financial-stat-value,
    .financial-breakdown-value {
      font-size: 1.5rem;
    }

    .financial-cta-button {
      padding: 0.75rem 2rem;
      font-size: 1rem;
    }

    .financial-guideline-icon {
      width: 50px;
      height: 50px;
      font-size: 1.5rem;
    }
  }

  /* style.css - Matching the exact design from the image */

  /* Base Styles */
  .academy-partnership-page {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    line-height: 1.6;
  }

  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  /* Hero Section */
  .hero-section {
    padding: 60px 0;
    background: #ffffff;
    padding-bottom: 0px;
  }

  /* .hero-content {
    display: flex;
    align-items: center;
    gap: 60px;
  } */

  .hero-text {
    flex: 1;
  }

  .hero-title1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 20px;
    line-height: 1.2;
  }

  .apply-button {
    background: #2563eb;
    color: white;
    border: none;
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .apply-button:hover {
    background: #1d4ed8;
  }

  .hero-visual {
    flex: 1;
  }

  .placeholder-visual {
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-radius: 12px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    overflow: hidden;
  }

  .visual-content {
    text-align: center;
  }

  .visual-icon {
    font-size: 48px;
    margin-bottom: 20px;
    color: #2563eb;
  }

  .visual-content h3 {
    color: #1e293b;
    font-size: 1.5rem;
    font-weight: 600;
  }

  /* Section Divider */
  .section-divider {
    padding: 20px 0;
  }

  .section-divider hr {
    border: none;
    height: 1px;
    background: #e2e8f0;
    margin: 0;
  }

  /* Section Header */
  .section-header {
    text-align: center;
    margin-bottom: 50px;
  }

  .section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 15px;
  }

  .section-subtitle {
    font-size: 1.1rem;
    color: #64748b;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
    font-family: '__nextjs-Geist';
  }

  /* Benefits Section */
  .benefits-section {
    padding-bottom: 60px;
    background: #ffffff;
  }

  .benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
  }

  .benefit-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .benefit-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  }

  .benefit-icon {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: #eff6ff;
    border-radius: 8px;
  }

  .benefit-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 15px;
    line-height: 1.4;
  }

  .benefit-description {
    color: #64748b;
    line-height: 1.6;
  }

  /* Included Section */
  .included-section {
    padding: 60px 0;
    background: #f8fafc;
  }

  .included-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
  }

  .included-visual {
    position: sticky;
    top: 20px;
  }

  .included-image-placeholder {
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
    border-radius: 12px;
    padding: 40px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
  }

  .included-image-content {
    text-align: center;
  }

  .image-icon {
    font-size: 48px;
    margin-bottom: 20px;
    color: #2563eb;
  }

  .included-image-content h4 {
    color: #1e293b;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 10px;
  }

  .included-image-content p {
    color: #64748b;
    font-size: 1rem;
  }

  .section-title-left {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 30px;
  }

  .features-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .feature-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
  }

  .feature-check {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: #dcfce7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
  }

  .feature-content {
    flex: 1;
  }

  .feature-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
    font-family: '__nextjs-Geist';
  }

  .feature-description {
    color: #64748b;
    line-height: 1.6;
    font-size: 0.95rem;
    font-family: '__nextjs-Geist';
  }

  /* Eligibility Section */
  .eligibility-section {
    padding: 60px 0;
    background: #ffffff;
    font-family: '__nextjs-Geist';
  }

  .eligibility-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
  }

  .eligibility-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }

  .eligibility-card-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #2563eb;
    font-family: '__nextjs-Geist';
  }

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

  .criteria-list li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
  }

  .criteria-list li:last-child {
    margin-bottom: 0;
  }

  .bullet-icon {
    width: 24px;
    height: 24px;
    background: #eff6ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    font-weight: bold;
    flex-shrink: 0;
  }

  .criteria-list li span {
    color: #475569;
    line-height: 1.5;
  }

  /* Process Section */
  .process-section {
    padding: 60px 0;
    background: #f8fafc;
  }

  .process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    position: relative;
  }

  .process-steps::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    height: 2px;
    background: #e2e8f0;
    z-index: 1;
  }

  .process-step {
    position: relative;
    z-index: 2;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    transition: transform 0.3s ease;
  }

  .process-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  }

  .step-number {
    width: 60px;
    height: 60px;
    background: #2563eb;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto 20px;
    position: relative;
    z-index: 3;
  }

  .step-content {
    padding-top: 10px;
  }

  .step-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 15px;
  }

  /* Responsive Design */
  @media (max-width: 1024px) {
    .hero-content {
      flex-direction: column;
      gap: 40px;
    }

    .included-wrapper {
      grid-template-columns: 1fr;
      gap: 40px;
    }

    .included-visual {
      position: static;
    }

    .placeholder-visual,
    .included-image-placeholder {
      height: 250px;
    }
  }

  @media (max-width: 768px) {
    .hero-title {
      font-size: 2rem;
    }

    .section-title,
    .section-title-left {
      font-size: 1.75rem;
    }

    .benefits-grid,
    .eligibility-cards,
    .process-steps {
      grid-template-columns: 1fr;
    }

    .process-steps::before {
      display: none;
    }

    .hero-section,
    .benefits-section,
    .included-section,
    .eligibility-section,
    .process-section {
      padding: 40px 0;
    }
  }

  @media (max-width: 480px) {
    .hero-title {
      font-size: 1.75rem;
    }

    .section-title,
    .section-title-left {
      font-size: 1.5rem;
    }

    .apply-button {
      width: 100%;
      justify-content: center;
    }

    .benefit-item,
    .eligibility-card,
    .process-step {
      padding: 20px;
    }
  }

  /* Print Styles */
  @media print {
    .academy-partnership-page {
      background: white;
    }

    .apply-button,
    .feature-check,
    .bullet-icon,
    .step-number {
      border: 1px solid #333 !important;
    }

    .placeholder-visual,
    .included-image-placeholder {
      border: 1px solid #ccc !important;
      background: #f9f9f9 !important;
    }
  }

  /* style.css - Updated with FAQ Section */

  /* Existing styles remain the same... */

  /* FAQ Section */
  .faq-section {
    padding: 60px 0;
    background: #ffffff;
  }

  .faq-container {
    max-width: 800px;
    margin: 40px auto 0;
  }

  .faq-item {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .faq-item:hover {
    border-color: #2563eb;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
  }

  .faq-item.active {
    border-color: #2563eb;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.15);
  }

  .faq-question {
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
  }

  .faq-question h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    flex: 1;
    line-height: 1.5;
  }

  .faq-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20px;
    transition: transform 0.3s ease;
  }

  .faq-item.active .faq-icon {
    transform: rotate(180deg);
  }

  .faq-answer {
    padding: 0 24px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    background: #f8fafc;
  }

  .faq-item.active .faq-answer {
    padding: 0 24px 24px;
    max-height: 500px;
  }

  .faq-answer p {
    color: #475569;
    line-height: 1.7;
    margin: 0;
    font-size: 1rem;
  }

  .faq-footer {
    margin-top: 40px;
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid #e2e8f0;
  }

  .faq-contact-text {
    color: #64748b;
    font-size: 1.1rem;
    line-height: 1.6;
  }

  .faq-contact-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
  }

  .faq-contact-link:hover {
    color: #1d4ed8;
    text-decoration: underline;
  }

  /* CTA Section */
  .cta-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: white;
  }

  .cta-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
  }

  .cta-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.3;
  }

  .cta-description {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 30px;
    line-height: 1.6;
  }

  .cta-button {
    background: white;
    color: #2563eb;
    border: none;
    padding: 16px 40px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  }

  /* Responsive Design for FAQ */
  @media (max-width: 768px) {
    .faq-question {
      padding: 20px;
    }

    .faq-question h4 {
      font-size: 1rem;
    }

    .faq-answer {
      padding: 0 20px;
    }

    .faq-item.active .faq-answer {
      padding: 0 20px 20px;
    }

    .cta-title {
      font-size: 1.75rem;
    }

    .cta-button {
      width: 100%;
      justify-content: center;
    }
  }

  @media (max-width: 480px) {
    .faq-section {
      padding: 40px 0;
    }

    .cta-section {
      padding: 50px 0;
    }

    .cta-title {
      font-size: 1.5rem;
    }

    .cta-description {
      font-size: 1rem;
    }
  }

  /* Animation for FAQ */
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .faq-item.active .faq-answer p {
    animation: slideDown 0.3s ease-out;
  }

  /* Print Styles */
  @media print {
    .faq-item {
      break-inside: avoid;
    }

    .faq-answer {
      max-height: none !important;
      padding: 0 24px 24px !important;
    }

    .faq-icon {
      display: none;
    }
  }

  /* ===== BASE STYLES ===== */
  .finance-education-section {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 105px 0;
    position: relative;
    overflow: hidden;
  }

  .finance-education-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 340px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
    z-index: 0;
  }

  /* ===== SECTION HEADERS ===== */
  .section-title {
    font-size: 48px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 20px;
    position: relative;
    text-align: center;
    line-height: 1.2;
    z-index: 1;
  }

  .section-title1 {
    font-size: 2rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 0rem;
    position: relative;
    text-align: center;
    line-height: 1.2;
    z-index: 1;
  }

  .section-title2 {
    font-size: 2rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 0rem;
    position: relative;
    text-align: left;
    line-height: 1.2;
    z-index: 1;
  }

  .section-title3 {
    font-size: 2rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 0rem;
    position: relative;
    text-align: center;
    line-height: 1.2;
    z-index: 1;
  }

  /* .section-title::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 2px;
  } */

  .text-highlight {
    background: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .section-subtitle {
    font-size: 18px;
    color: #64748b;
    max-width: 700px;
    margin: 0 auto 50px;
    text-align: center;
    line-height: 1.7;
    position: relative;
    z-index: 1;
  }

  /* ===== EXPERT EDUCATORS SECTION ===== */
  .educator-card {
    background: white;
    border-radius: 24px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    z-index: 1;
  }

  .educator-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  }

  .educator-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 24px 24px 0 0;
  }

  .profile-image-container {
    position: relative;
    margin-bottom: 25px;
  }

  .profile-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 5px solid white;
    box-shadow: 0 15px 35px rgba(59, 130, 246, 0.2);
  }

  .profile-image svg {
    width: 20px;
  }

  .profile-image.bg-primary-gradient {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
  }

  .profile-image.bg-success-gradient {
    background: linear-gradient(135deg, #10b981, #059669);
  }

  .profile-image.bg-danger-gradient {
    background: linear-gradient(135deg, #ef4444, #dc2626);
  }

  .profile-image.bg-warning-gradient {
    background: linear-gradient(135deg, #f59e0b, #d97706);
  }

  .profile-icon {
    font-size: 60px;
    color: white;
  }


  .educator-name {
    font-size: 28px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 8px;
    line-height: 1.2;
  }

  .educator-role {
    font-size: 18px;
    font-weight: 600;
    color: #3b82f6;
    margin-bottom: 20px;
    padding: 8px 20px;
    background: #e0f2fe;
    border-radius: 20px;
    display: inline-block;
    border: 2px solid #3b82f6;
  }

  .experience-badge {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 16px;
    display: inline-block;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    margin-bottom: 12px;
  }

  .credentials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 25px;
  }

  .credential-tag {
    background: white;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
  }

  .credential-tag:hover {
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
  }

  .credential-tag i {
    color: #3b82f6;
    font-size: 16px;
  }

  .specialization-card {
    background: #f0f9ff;
    padding: 20px;
    border-radius: 16px;
    margin-bottom: 25px;
    border-left: 4px solid #3b82f6;
  }

  .specialization-card h6 {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .specialization-card h6 i {
    color: #3b82f6;
  }

  .educator-description {
    color: #64748b;
    font-size: 16px;
    line-height: 1.7;
    font-style: italic;
    padding: 20px;
    background: #f8fafc;
    border-radius: 12px;
    border-left: 3px solid #3b82f6;
    position: relative;
  }

  .educator-description i {
    color: #3b82f6;
    margin-right: 10px;
  }

  /* ===== EXPERTISE SECTION ===== */
  .expertise-section {
    background: white;
    padding: 100px 0;
    margin: 80px 0;
    border-radius: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 1;
  }

  .expertise-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #10b981);
    border-radius: 40px 40px 0 0;
  }

  .expertise-card {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-radius: 24px;
    padding: 40px 30px;
    text-align: center;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid #e2e8f0;
    position: relative;
    overflow: hidden;
  }

  .expertise-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    border-color: #3b82f6;
  }

  .expertise-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    font-size: 48px;
    color: white;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 1;
  }

  .expertise-icon::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    background: inherit;
    opacity: 0.2;
    z-index: -1;
  }

  .expertise-icon.bg-primary-gradient {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
  }

  .expertise-icon.bg-success-gradient {
    background: linear-gradient(135deg, #10b981, #059669);
  }

  .expertise-icon.bg-danger-gradient {
    background: linear-gradient(135deg, #ef4444, #dc2626);
  }

  .expertise-icon.bg-warning-gradient {
    background: linear-gradient(135deg, #f59e0b, #d97706);
  }

  .expertise-title {
    font-size: 24px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 15px;
    line-height: 1.3;
  }

  .expertise-description {
    color: #64748b;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 25px;
  }

  .expertise-footer {
    color: #3b82f6;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px dashed #e2e8f0;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .expertise-footer:hover {
    color: #2563eb;
    gap: 15px;
  }

  /* ===== CREDENTIALS SECTION ===== */
  .credential-card {
    background: white;
    border-radius: 24px;
    padding: 40px 30px;
    text-align: center;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 3px solid #e2e8f0;
    position: relative;
    overflow: hidden;
  }

  .credential-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: #3b82f6;
    border-radius: 24px 24px 0 0;
  }

  .credential-card.credential-primary::before {
    background: #3b82f6;
  }

  .credential-card.credential-success::before {
    background: #10b981;
  }

  .credential-card.credential-danger::before {
    background: #ef4444;
  }

  .credential-card.credential-warning::before {
    background: #f59e0b;
  }

  .credential-card.credential-info::before {
    background: #06b6d4;
  }

  .credential-card.credential-purple::before {
    background: #8b5cf6;
  }

  .credential-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    border-color: #3b82f6;
  }

  .credential-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 48px;
    color: white;
    position: relative;
  }

  .expertise-icon svg {
    width: 20px;
  }

  .credential-icon i {
    position: relative;
    z-index: 2;
  }

  .credential-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: inherit;
    opacity: 0.2;
  }

  .credential-primary .credential-icon {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 15px 35px rgba(59, 130, 246, 0.25);
  }

  .credential-success .credential-icon {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 15px 35px rgba(16, 185, 129, 0.25);
  }

  .credential-danger .credential-icon {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 15px 35px rgba(239, 68, 68, 0.25);
  }

  .credential-warning .credential-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 15px 35px rgba(245, 158, 11, 0.25);
  }

  .credential-info .credential-icon {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    box-shadow: 0 15px 35px rgba(6, 182, 212, 0.25);
  }

  .credential-purple .credential-icon {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    box-shadow: 0 15px 35px rgba(139, 92, 246, 0.25);
  }

  .credential-title {
    font-size: 36px;
    font-weight: 900;
    color: #1e293b;
    margin-bottom: 10px;
    line-height: 1;
    letter-spacing: -0.5px;
  }

  .credential-description {
    color: #64748b;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 25px;
    line-height: 1.5;
  }

  .credential-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 25px;
    border-top: 2px dashed #e2e8f0;
    margin-top: 25px;
  }

  .credential-stats span {
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* ===== TEACHING PHILOSOPHY SECTION ===== */
  .teaching-philosophy-section {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    padding: 100px 0;
    margin-top: 80px;
    border-radius: 0px;
    position: relative;
    overflow: hidden;
    z-index: 1;
  }

  .teaching-philosophy-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #10b981);
    border-radius: 40px 40px 0 0;
  }

  .teaching-philosophy-section .section-title {
    color: white;
  }

  .teaching-philosophy-section .section-title::after {
    background: linear-gradient(90deg, #ffffff, #cbd5e1);
  }

  .teaching-philosophy-section .section-subtitle {
    color: rgba(255, 255, 255, 0.8);
  }

  .philosophy-card-large {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 28px;
    padding: 50px 35px;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
  }

  .philosophy-card-large:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  }

  .philosophy-card-large::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 28px 28px 0 0;
  }

  .philosophy-icon-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 35px;
    font-size: 56px;
    color: white;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    position: relative;
    z-index: 1;
  }

  .philosophy-icon-large svg {
    width: 22px;
  }

  .credential-icon svg {
    width: 25px;
  }

  .philosophy-icon-large::after {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 50%;
    background: inherit;
    opacity: 0.2;
    z-index: -1;
  }

  .philosophy-title-large {
    font-size: 28px;
    font-weight: 800;
    color: white;
    margin-bottom: 25px;
    text-align: center;
    line-height: 1.3;
  }

  .philosophy-description-large {
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 30px;
    text-align: center;
  }

  .philosophy-highlights {
    margin-top: 35px;
  }

  .highlight-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    padding: 12px 18px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: all 0.3s ease;
  }

  .highlight-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(5px);
  }

  .highlight-item i {
    font-size: 22px;
    color: #10b981;
    flex-shrink: 0;
  }

  .teaching-principles {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 28px;
    padding: 50px 40px;
    margin-top: 60px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
  }

  .principle-item {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 25px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 18px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 20px;
    border: 1px solid transparent;
  }

  .principle-item:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  }

  .principle-icon {
    font-size: 48px;
    color: #3b82f6;
    flex-shrink: 0;
    width: 70px !important;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 20px;
  }

  .principle-item svg {
    padding: 25px;
  }

  .principle-item h5 {
    color: white;
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 20px;
  }

  .principle-item p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0;
    font-size: 16px;
    line-height: 1.6;
  }

  /* ===== RESPONSIVE DESIGN ===== */
  @media (max-width: 1200px) {
    .section-title {
      font-size: 42px;
    }
  }

  @media (max-width: 992px) {
    .finance-education-section {
      padding: 60px 0;
    }

    .section-title {
      font-size: 36px;
    }

    .expertise-section {
      padding: 70px 0;
      margin: 60px 0;
    }

    .teaching-philosophy-section {
      padding: 70px 0;
      margin-top: 60px;
    }

    .educator-name {
      font-size: 24px;
    }

    .profile-image {
      width: 120px;
      height: 120px;
    }

    .profile-icon {
      font-size: 48px;
    }
  }

  @media (max-width: 768px) {
    .finance-education-section::before {
      height: 200px;
    }

    .section-title {
      font-size: 32px;
    }

    .section-subtitle {
      font-size: 16px;
      padding: 0 20px;
    }

    .educator-card {
      padding: 25px 20px;
    }

    .expertise-card,
    .credential-card,
    .philosophy-card-large {
      padding: 35px 25px;
    }

    .teaching-principles {
      padding: 35px 25px;
    }

    .principle-item {
      flex-direction: column;
      text-align: center;
      gap: 20px;
    }

    .philosophy-icon-large {
      width: 100px;
      height: 100px;
      font-size: 48px;
    }

    .philosophy-title-large {
      font-size: 24px;
    }
  }

  @media (max-width: 576px) {
    .finance-education-section {
      padding: 50px 15px;
    }

    .section-title {
      font-size: 28px;
    }

    .educator-name {
      font-size: 22px;
    }

    .profile-image {
      width: 100px;
      height: 100px;
    }

    .profile-icon {
      font-size: 40px;
    }

    .expertise-section,
    .teaching-philosophy-section {
      border-radius: 30px;
      padding: 50px 20px;
    }

    .credential-title {
      font-size: 32px;
    }

    .expertise-icon {
      width: 80px;
      height: 80px;
      font-size: 36px;
    }
  }

  /* ===== ANIMATIONS ===== */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .educator-card,
  .expertise-card,
  .credential-card,
  .philosophy-card-large {
    animation: fadeInUp 0.6s ease-out forwards;
  }

  .educator-card:nth-child(1) {
    animation-delay: 0.1s;
  }

  .educator-card:nth-child(2) {
    animation-delay: 0.2s;
  }

  .educator-card:nth-child(3) {
    animation-delay: 0.3s;
  }

  .educator-card:nth-child(4) {
    animation-delay: 0.4s;
  }

  .expertise-card:nth-child(1) {
    animation-delay: 0.2s;
  }

  .expertise-card:nth-child(2) {
    animation-delay: 0.3s;
  }

  .expertise-card:nth-child(3) {
    animation-delay: 0.4s;
  }

  .expertise-card:nth-child(4) {
    animation-delay: 0.5s;
  }

  /* ===== HOVER EFFECTS ===== */
  .educator-card:hover .educator-role {
    background: #3b82f6;
    color: white;
  }

  .expertise-card:hover .expertise-footer {
    border-color: #3b82f6;
  }

  .credential-card:hover .credential-description {
    color: #475569;
  }

  .philosophy-card-large:hover .highlight-item {
    background: rgba(255, 255, 255, 0.1);
  }

  /* Section5.css */

  /* Base Styles */
  .finance-edu-container {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #2c3e50;
    background-color: #f8fafc;
  }

  /* Typography */
  .section-main-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
  }

  .section-main-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 2px;
  }

  .section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 2rem;
  }

  .section-subtitle {
    font-size: 1.1rem;
    color: #64748b;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
  }

  /* Section Backgrounds */
  .expert-educators-section {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    padding: 4rem 0;
  }

  .expertise-section {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    padding: 4rem 0;
  }

  .credentials-section {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    padding: 4rem 0;
  }

  .philosophy-section {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    padding: 4rem 0;
  }

  /* Educator Cards */
  .educator-profile-card {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
    border: 1px solid #e2e8f0;
  }

  .educator-profile-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    border-color: #3b82f6;
  }

  .educator-card-inner {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
  }

  /* Educator Avatar */
  .educator-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }

  .avatar-primary {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  }

  .avatar-equity {
    background: linear-gradient(135deg, #10b981, #059669);
  }

  .avatar-risk {
    background: linear-gradient(135deg, #f59e0b, #d97706);
  }

  .avatar-psychology {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  }

  .educator-initials {
    color: white;
    font-size: 1.8rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  /* Educator Info */
  .educator-info {
    flex: 1;
  }

  .educator-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.5rem;
  }

  .educator-role {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: inline-block;
    padding: 0.25rem 1rem;
    border-radius: 20px;
  }

  .role-forex {
    background: rgba(59, 130, 246, 0.1);
    color: #1d4ed8;
  }

  .role-equity {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
  }

  .role-risk {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
  }

  .role-psychology {
    background: rgba(139, 92, 246, 0.1);
    color: #7c3aed;
  }

  .educator-badges {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
  }

  .badge-item {
    background: #f1f5f9;
    color: #475569;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid #e2e8f0;
  }

  .educator-details {
    margin-bottom: 1rem;
  }

  .specialization,
  .experience {
    margin-bottom: 0.5rem;
    color: #475569;
  }

  .specialization strong,
  .experience strong {
    color: #334155;
  }

  .educator-description {
    color: #64748b;
    line-height: 1.6;
    font-size: 0.95rem;
  }

  /* Expertise Cards */
  .expertise-card {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    height: 100%;
    border: 1px solid #e2e8f0;
  }

  .expertise-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  }

  .expertise-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  }

  .icon-forex {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  }

  .icon-equity {
    background: linear-gradient(135deg, #10b981, #059669);
  }

  .icon-risk {
    background: linear-gradient(135deg, #f59e0b, #d97706);
  }

  .icon-psychology {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  }

  .icon-symbol {
    font-size: 2rem;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  .expertise-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.75rem;
  }

  .expertise-description {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
  }

  /* Credential Cards */
  .credential-card {
    background: white;
    border-radius: 16px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    height: 100%;
    border-top: 4px solid transparent;
  }

  .credential-card:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  }

  .credential-1 {
    border-top-color: #3b82f6;
  }

  .credential-2 {
    border-top-color: #10b981;
  }

  .credential-3 {
    border-top-color: #f59e0b;
  }

  .credential-4 {
    border-top-color: #8b5cf6;
  }

  .credential-5 {
    border-top-color: #ef4444;
  }

  .credential-6 {
    border-top-color: #06b6d4;
  }

  .credential-abbr {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1e3a8a;
    margin-bottom: 0.5rem;
  }

  .credential-full {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.4;
  }

  /* Philosophy Section */
  .philosophy-container {
    background: white;
    border-radius: 24px;
    padding: 3rem;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    max-width: 900px;
    margin: 0 auto;
  }

  .philosophy-point {
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 2px solid #f1f5f9;
  }

  .philosophy-point:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }

  .philosophy-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 1rem;
    position: relative;
    padding-left: 1.5rem;
  }

  .philosophy-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3b82f6;
  }

  .philosophy-description {
    color: #475569;
    line-height: 1.7;
    font-size: 1.05rem;
    padding-left: 1.5rem;
  }

  /* Responsive Design */
  @media (max-width: 768px) {
    .landing-page {
      margin-top: 70px;
    }

    .section-main-title {
      font-size: 2rem;
    }

    .section-title {
      font-size: 1.75rem;
    }

    .educator-card-inner {
      flex-direction: column;
      text-align: center;
      align-items: center;
    }

    .educator-avatar {
      margin-bottom: 1rem;
    }

    .educator-badges {
      justify-content: center;
    }

    .philosophy-container {
      padding: 2rem 1.5rem;
    }

    .philosophy-title,
    .philosophy-description {
      padding-left: 0;
    }

    .philosophy-title::before {
      display: none;
    }
  }

  @media (max-width: 576px) {

    .expertise-card,
    .credential-card,
    .educator-profile-card {
      padding: 1.5rem;
    }

    .section-main-title {
      font-size: 1.75rem;
    }
  }


  select:focus,
  .form-control:focus,
  .form-select:focus,
  textarea:focus,
  input:focus {
    outline: 0;
    box-shadow: none;
    color: #000000;
    background-color: #ffffff;
  }

  .contactus-page {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    color: #333;
  }

  .contactus-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  /* Hero Section */
  .contactus-hero {
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
    padding: 80px 0;
    text-align: center;
  }

  .contactus-main-title {
    font-size: 3rem;
    font-weight: 700;
    color: #1a237e;
    margin-bottom: 1rem;
  }

  .contactus-hero-desc {
    font-size: 1.25rem;
    color: #37474f;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
  }

  /* Main Content */
  .contactus-main-content {
    padding: 80px 0;
  }

  .contactus-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
  }

  @media (max-width: 992px) {
    .contactus-content-grid {
      grid-template-columns: 1fr;
      gap: 40px;
    }
  }

  /* Contact Info Column */
  .contactus-section-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1a237e;
    margin-bottom: 1rem;
  }

  .contactus-section-desc {
    color: #546e7a;
    line-height: 1.6;
    margin-bottom: 2rem;
  }

  /* Info Cards */
  .contactus-info-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .contactus-info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  }

  .contactus-card-icon-blue,
  .contactus-card-icon-green,
  .contactus-card-icon-purple {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .contactus-card-icon-blue {
    background-color: #e3f2fd;
    color: #1976d2;
  }

  .contactus-card-icon-green {
    background-color: #e8f5e9;
    color: #2e7d32;
  }

  .contactus-card-icon-purple {
    background-color: #f3e5f5;
    color: #7b1fa2;
  }

  .contactus-card-icon-blue svg,
  .contactus-card-icon-green svg,
  .contactus-card-icon-purple svg {
    width: 24px;
    height: 24px;
  }

  .contactus-card-content {
    flex: 1;
  }

  .contactus-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
  }

  .contactus-card-text-primary {
    color: #37474f;
    margin-bottom: 4px;
    line-height: 1.5;
  }

  .contactus-card-text-secondary {
    color: #78909c;
    font-size: 0.875rem;
  }

  /* Contact Form Column */
  .contactus-form-card {
    background: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  .contactus-form-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a237e;
    margin-bottom: 24px;
  }

  /* Form Styles */
  .contactus-form-group {
    margin-bottom: 20px;
  }

  .contactus-form-label {
    display: block;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    font-size: 0.95rem;
  }

  .contactus-required {
    color: #f44336;
  }

  .contactus-form-input,
  .contactus-form-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.3s ease;
  }

  .contactus-form-input:focus,
  .contactus-form-textarea:focus {
    outline: none;
    border-color: #1976d2;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
  }

  .contactus-form-textarea {
    resize: vertical;
    min-height: 120px;
  }

  .contactus-submit-btn {
    width: 100%;
    background: linear-gradient(135deg, #1976d2 0%, #0d47a1 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 16px;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .contactus-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(25, 118, 210, 0.25);
  }

  .contactus-btn-icon {
    width: 20px;
    height: 20px;
  }

  /* Inquiries Section */
  .contactus-inquiries-section {
    background-color: #f8f9fa;
    padding: 80px 0;
  }

  .contactus-section-header {
    text-align: center;
    margin-bottom: 48px;
  }

  .contactus-section-subtitle {
    color: #78909c;
    font-size: 1.125rem;
    margin-top: 8px;
  }

  .contactus-inquiries-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  @media (max-width: 992px) {
    .contactus-inquiries-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 576px) {
    .contactus-inquiries-grid {
      grid-template-columns: 1fr;
    }
  }

  .contactus-inquiry-card {
    background: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    height: 100%;
    transition: transform 0.3s ease;
  }

  .contactus-inquiry-card:hover {
    transform: translateY(-4px);
  }

  .contactus-inquiry-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a237e;
    margin-bottom: 16px;
  }

  .contactus-inquiry-text {
    color: #546e7a;
    line-height: 1.6;
  }

  /* FAQ Section */
  .contactus-faq-section {
    padding: 80px 0;
  }

  .contactus-faq-main-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    color: #1a237e;
    margin-bottom: 48px;
  }

  .contactus-faq-container {
    max-width: 800px;
    margin: 0 auto;
  }

  .contactus-faq-item {
    margin-bottom: 16px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background: white;
  }

  .contactus-faq-question {
    width: 100%;
    padding: 24px;
    background: white;
    border: none;
    text-align: left;
    font-size: 1.125rem;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
  }

  .contactus-faq-question:hover {
    background-color: #f8f9fa;
  }

  .contactus-faq-question.active {
    background-color: #f8f9fa;
  }

  .contactus-faq-icon {
    width: 24px;
    height: 24px;
    color: #1976d2;
    transition: transform 0.3s ease;
  }

  .contactus-faq-icon.rotated {
    transform: rotate(180deg);
  }

  .contactus-faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 24px;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
  }

  .contactus-faq-answer.show {
    max-height: 500px;
    padding: 0 24px 24px 24px;
  }

  .contactus-faq-answer p {
    color: #546e7a;
    line-height: 1.6;
    margin: 0;
  }

  /* Notice Section */
  .contactus-notice-section {
    padding: 40px 0;
  }

  .contactus-notice-box {
    background: #fff8e1;
    border: 1px solid #ffecb3;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }

  .contactus-notice-icon {
    width: 24px;
    height: 24px;
    color: #ff9800;
    flex-shrink: 0;
    margin-top: 2px;
  }

  .contactus-notice-content {
    color: #5d4037;
    line-height: 1.6;
    font-size: 1rem;
  }

  .contactus-notice-content strong {
    color: #e65100;
  }

  /* Responsive Design */
  @media (max-width: 768px) {
    .contactus-main-title {
      font-size: 2.5rem;
    }

    .contactus-hero-desc {
      font-size: 1.125rem;
      padding: 0 16px;
    }

    .contactus-hero {
      padding: 60px 0;
    }

    .contactus-main-content,
    .contactus-inquiries-section,
    .contactus-faq-section {
      padding: 60px 0;
    }

    .contactus-info-card {
      padding: 20px;
    }

    .contactus-form-card {
      padding: 24px;
    }

    .contactus-inquiry-card {
      padding: 24px;
    }

    .contactus-faq-question {
      padding: 20px;
      font-size: 1rem;
    }

    .contactus-faq-answer.show {
      padding: 0 20px 20px 20px;
    }
  }

  @media (max-width: 480px) {
    .contactus-main-title {
      font-size: 2rem;
    }

    .contactus-hero-desc {
      font-size: 1rem;
    }

    .contactus-container {
      padding: 0 16px;
    }
  }

  .hero-text {
    margin-top: 160px;
  }

  /* Hero Section */
  .fin-edu-hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    overflow: hidden;
    background-image: url(../img/bg-img.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 0px;
  }

  .fin-edu-hero-section::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: radial-gradient(circle, #111827a1 0%, #111827b8 31%, #111827 64%, #111827 100%);
  }

  .fin-edu-background-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
  }

  .fin-edu-dark-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a0e1a;
  }

  .fin-edu-gradient-blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.3) 0%, transparent 50%),
      radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.2) 0%, transparent 50%);
    opacity: 0.7;
  }

  .fin-edu-content-container {
    max-width: 900px;
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 2;
  }

  /* Warning Label */
  .fin-edu-warning-badge {
    background: #ff980059;
    color: #fff;
    padding: 0.8rem 2.2rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 1.5rem;
    border: 1px solid rgb(255 233 128 / 69%);
    backdrop-filter: blur(10px);
    text-transform: uppercase;
    margin-top: 1.5rem;
  }

  /* Warning Label */
  .fin-edu-warning-badge1 {
    background: #ffe8c659;
    color: #a16102;
    padding: 0.8rem 2.2rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0;
    display: inline-block;
    border: 1px solid #fbbf6559;
    backdrop-filter: blur(10px);
    text-transform: uppercase;
    margin-bottom: 0;
    margin-top: 15px;
  }

  /* Typography */
  .fin-edu-primary-heading {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0.5rem;
    letter-spacing: -1px;
    color: #fff;
  }

  .fin-edu-accent-gradient {
    background: linear-gradient(90deg, #35D29D, #21D2E9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    font-weight: 800;
  }

  .fin-edu-secondary-heading {
    font-size: 2.2rem;
    font-weight: 300;
    color: #fff;
    margin-bottom: 2.5rem;
    letter-spacing: 1.5px;
  }

  .fin-edu-paragraph-text {
    font-size: 1.2rem;
    color: #fff;
    max-width: 650px;
    margin: 0 auto 4rem;
    line-height: 1.8;
    opacity: 1;
    font-family: '__nextjs-Geist';
  }

  span.span1 {
    color: #34d29f;
    font-weight: bold;
  }

  span.span2 {
    color: #2bd2c4;
    font-weight: bold;
  }

  span.span3 {
    color: #22d2e7;
    font-weight: bold;
  }

  span.span4 {
    color: #ffeb3b;
    font-weight: bold;
  }

  /* Buttons */
  .fin-edu-action-buttons {
    display: flex;
    gap: 1.2rem;
    justify-content: center;
    margin-bottom: 5rem;
    flex-wrap: wrap;
  }

  .fin-edu-primary-action {
    background: linear-gradient(90deg, #35D29D, #21D2E9);
    color: white;
    padding: 1.1rem 2.8rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 25px rgb(46 210 183 / 32%);
  }

  .fin-edu-primary-action:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgb(41 210 205 / 22%);
    background: linear-gradient(135deg, #03A9F4, #1d8c9b);
    color: #fff;
  }

  .fin-edu-secondary-action {
    background: rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
    padding: 1.1rem 2.8rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    backdrop-filter: blur(10px);
  }

  .fin-edu-secondary-action:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-3px);
    color: #fff;
  }

  /* Stats Section */
  .fin-edu-statistics-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    margin-top: 3rem;
  }

  .fin-edu-stat-card {
    text-align: center;
    min-width: 140px;
    background: rgb(255 255 255 / 17%);
    padding: 15px;
    border-radius: 15px;
    border: 1px solid #dcdcdca1;
  }

  .fin-edu-stat-value {
    font-size: 2.1rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    line-height: 1;
    background: linear-gradient(90deg, #35D29D, #21D2E9);
    background-clip: text;
    color: transparent;
    display: inline-block;
  }

  .fin-edu-stat-title {
    font-size: 1rem;
    color: #fff;
    font-weight: 400;
    letter-spacing: 0.5px;
    opacity: 0.9;
  }

  /* Responsive Design */
  @media (max-width: 768px) {
    .fin-edu-warning-badge {
      font-size: 0.75rem;
      padding: 0.7rem 1.8rem;
      margin-bottom: 2.5rem;
    }

    .fin-edu-primary-heading {
      font-size: 2.8rem;
    }

    .fin-edu-secondary-heading {
      font-size: 1.8rem;
    }

    .fin-edu-paragraph-text {
      font-size: 1.1rem;
      margin-bottom: 3.5rem;
      padding: 0 1rem;
    }

    .fin-edu-action-buttons {
      flex-direction: column;
      align-items: center;
      gap: 1rem;
      margin-bottom: 4rem;
    }

    .fin-edu-primary-action,
    .fin-edu-secondary-action {
      width: 100%;
      max-width: 300px;
      justify-content: center;
      padding: 1rem 2rem;
    }

    .fin-edu-statistics-row {
      flex-direction: column;
      gap: 2.5rem;
    }

    .fin-edu-stat-card {
      min-width: 100%;
    }

    .fin-edu-stat-value {
      font-size: 2.8rem;
    }
  }

  @media (max-width: 480px) {
    .fin-edu-hero-section {
      padding: 1.5rem;
    }

    .fin-edu-primary-heading {
      font-size: 2.3rem;
    }

    .fin-edu-secondary-heading {
      font-size: 1.5rem;
    }

    .fin-edu-paragraph-text {
      font-size: 1rem;
    }

    .fin-edu-stat-value {
      font-size: 2.4rem;
    }
  }

  .footer-btn {
    display: inline-block;
    align-items: center;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 16px;
    background: #fff;
    color: #000;
    padding: 16px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .blue-edu-icon i {
    color: blue;
  }

  .green-edu-icon i {
    color: #4CAF50;
  }

  .purple-edu-icon i {
    color: #c267d1;
  }

  .amber-edu-icon i {
    color: #d78000;
  }

  .banner-img {
    border-radius: 30px;
    text-align: center;
    margin: 30px auto;
  }

  .community-section {
    background-color: #275fe2;
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: #333;
  }

  .community-main-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #1a365d;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid #3b82f6;
  }

  .community-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2d3748;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
  }

  /* Stats Section */
  .stat-card {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
  }

  .stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  .stat-number {
    font-size: 2.2rem;
    font-weight: 700;
    color: #3b82f6;
    margin-bottom: 0.25rem;
    line-height: 1;
  }

  .stat-label {
    font-size: 1rem;
    color: #4a5568;
    font-weight: 500;
  }

  .stat-number1 {
    font-size: 30px;
  }

  /* Discussions Section */
  .discussions-container,
  .events-container {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .discussion-item,
  .event-item {
    border-bottom: 1px solid #e2e8f0;
    transition: background-color 0.2s ease;
  }

  .discussion-item:hover,
  .event-item:hover {
    background-color: #f8fafc;
  }

  .discussion-item:last-child,
  .event-item:last-child {
    border-bottom: none;
  }

  .discussion-author div {
    font-size: 12px;
    color: gray;
  }

  .msg-flexing-div spam {
    font-size: 14px;
    font-weight: 500;
    color: gray;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .msg-flexing-div {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .discussion-author {
    font-size: 0.95rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.25rem;
    display: flex;
    gap: 15px;
  }

  .discussion-topic {
    font-size: 0.9rem;
    color: #4a5568;
    margin-bottom: 0.5rem;
    line-height: 1.3;
  }

  .discussion-category {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #3F51B5;
    background-color: #2196f352;
    padding: 0.2rem 0.75rem;
    border-radius: 12px;
  }

  .discussion-replies {
    text-align: right;
    min-width: 80px;
  }

  .replies-icon {
    display: block;
    font-size: 1.2rem;
  }

  .replies-count {
    font-size: 0.8rem;
    color: #3b82f6;
    font-weight: 600;
    white-space: nowrap;
  }

  /* Events Section */
  .event-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #2d3748;
    line-height: 1.3;
  }

  .event-time,
  .event-instructor {
    font-size: 0.85rem;
    color: #6b7280;
  }

  .event-registered {
    font-size: 0.85rem;
    color: #10b981;
    font-weight: 600;
    padding-top: 0.5rem;
  }

  /* Guidelines Section */
  .guidelines-subtitle {
    font-size: 1rem;
    color: #6b7280;
    font-style: italic;
  }

  .guidelines-container {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .guideline-item {
    padding: 0.75rem;
    border-radius: 6px;
    transition: background-color 0.2s ease;
  }

  .guideline-item:hover {
    background-color: #f8fafc;
  }

  .guideline-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
  }

  .guideline-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.25rem;
  }

  .guideline-text {
    font-size: 0.9rem;
    color: #4a5568;
    line-height: 1.4;
    margin: 0;
  }

  /* CTA Section */
  .cta-container {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  }

  .cta-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
  }

  .cta-text {
    font-size: 1rem;
    opacity: 0.9;
    line-height: 1.4;
  }

  .btn-join-community {
    background-color: white;
    color: #3b82f6;
    font-weight: 600;
    font-size: 1.1rem;
    border: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .btn-join-community:hover {
    background-color: #f0f9ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }

  .stats-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }

  .community-bg-section {
    background: #2563EA;
    padding: 30px;
  }

  .stat-label1 {
    color: #2563ea;
    font-family: '__nextjs-Geist';
  }

  .Community-Guidelines {
    background: #F9FAFC;
    padding: 50px 0px;
  }

  .day-card {
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0px 1px 2px 1px #2196f36b;
    text-align: center;
  }

  .day-flesing-day {
    display: flex;
    align-items: start;
    gap: 25px;
  }

  .day-card h6 {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    line-height: 1;
  }

  /* new chnages */
  .day-card p {
    font-size: 12px;
  }

  .discussion-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
  }

  .circal-div {
    anchor-name: none;
    border-radius: 50px;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Responsive Design */
  @media (max-width: 992px) {
    .community-main-title {
      font-size: 1.8rem;
    }

    .community-subtitle {
      font-size: 1.3rem;
    }

    .stat-number {
      font-size: 1.8rem;
    }

    .banner-img {
      border-radius: 0px;
    }

    .hero-content {
      padding-bottom: 0px;
      padding-top: 0;
    }

    .hero-edu-section {
      margin-top: 0px;

    }

    .disclaimer-title {
      font-size: 22px;
    }

    .hero-title1 {
      font-size: 1.5rem;
    }

    .contactus-hero {
      margin-top: 0px;
    }

    .expert-educators-section {
      padding-top: 0;
    }

    .disclaimer-header {
      padding-top: 0;
    }

    .warning-icon {
      margin-bottom: 0px;
    }
  }



  @media (max-width: 768px) {
    .cta-title {
      font-size: 1.3rem;
    }

    .cta-text {
      font-size: 0.95rem;
    }

    .btn-join-community {
      font-size: 1rem;
      padding: 0.75rem;
    }

  }

  @media (max-width: 576px) {
    .community-main-title {
      font-size: 1.6rem;
    }

    .community-subtitle {
      font-size: 1.2rem;
    }

    .stat-card {
      padding: 1.25rem;
    }

    .stat-number {
      font-size: 1.6rem;
    }

    .acording-m {
      margin-top: 0px;
    }

    .benefits-section {
      padding-bottom: 0px;
    }

  }

  body {
    font-family: var(--font-geist-sans), -apple-system, BlinkMacSystemFont,
      "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
  }

  .bullet-icon svg {
    width: 0.7em;
  }

  .benefit-icon svg {
    width: 1.2rem;
  }

  .edu-video-library {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: #ffffff;
  }

  .edu-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
  }

  /*===========================================
          HERO SECTION STYLES
        ===========================================*/
  .edu-hero-wrapper {
    padding: 80px 0 40px;
    background: linear-gradient(to bottom, #ffffff, #fafafa);
  }

  .edu-hero-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
  }

  .edu-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(37, 99, 235, 0.08);
    padding: 8px 16px;
    border-radius: 100px;
    color: #2563eb;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 24px;
  }

  .edu-hero-badge-icon {
    font-size: 16px;
  }

  .edu-hero-title {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #0a0a0a;
    margin-bottom: 20px;
  }

  .edu-text-gradient {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .edu-hero-description {
    font-size: 18px;
    line-height: 1.6;
    color: #5b6778;
    margin-bottom: 48px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }

  .edu-featured-card {
    background: white;
    border-radius: 24px;
    padding: 32px;

    gap: 24px;
    text-align: center;
    box-shadow: 0 20px 35px -8px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f2f5;
    transition: all 0.3s ease;
  }

  .edu-featured-card:hover {
    box-shadow: 0 25px 40px -12px rgba(37, 99, 235, 0.15);
    border-color: rgba(37, 99, 235, 0.2);
  }

  .edu-featured-icon-wrapper {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background: #2563eb;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  .edu-featured-icon {
    font-size: 40px;
    color: white;
  }

  .edu-featured-badge {
    display: inline-block;
    background: #fef3c7;
    color: #b45309;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 100px;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .edu-featured-title {
    font-size: 22px;
    font-weight: 700;
    color: #0a0a0a;
    margin-bottom: 10px;
  }

  .edu-featured-text {
    font-size: 15px;
    line-height: 1.6;
    color: #5b6778;
    margin-bottom: 16px;
  }

  .edu-featured-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #2563eb;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: gap 0.2s ease;
  }

  .edu-featured-link:hover {
    gap: 14px;
  }

  .edu-featured-link-icon {
    font-size: 14px;
  }

  /*===========================================
          CATEGORY SECTION STYLES
        ===========================================*/
  .edu-category-wrapper {
    padding: 60px 0;
    background: #fafafa;
  }

  .edu-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
  }

  .edu-section-title {
    font-size: 28px;
    font-weight: 700;
    color: #0a0a0a;
    margin: 0;
    letter-spacing: -0.01em;
  }

  .edu-filter-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1.5px solid #e4e7ec;
    border-radius: 100px;
    background: white;
    color: #364153;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
  }

  .edu-filter-btn:hover {
    border-color: #2563eb;
    color: #2563eb;
  }

  .edu-filter-icon {
    font-size: 14px;
  }

  .edu-category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 48px;
  }

  .edu-tab-btn {
    padding: 10px 24px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .edu-tab-active {
    background: #2563eb;
    color: white;
    box-shadow: 0 8px 16px -4px rgba(37, 99, 235, 0.2);
  }

  .edu-tab-inactive {
    background: white;
    color: #5b6778;
    border: 1.5px solid #e4e7ec;
  }

  .edu-tab-inactive:hover {
    border-color: #2563eb;
    color: #2563eb;
  }

  /* Video Grid */
  .edu-video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }

  .edu-video-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    border: 1px solid #f0f2f5;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
  }

  .edu-video-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 30px -8px rgba(0, 0, 0, 0.08);
    border-color: rgba(37, 99, 235, 0.15);
  }

  .edu-video-thumbnail {
    position: relative;
  }

  .edu-thumbnail-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .edu-video-icon {
    font-size: 48px;
  }

  .edu-duration-badge {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    color: white;
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .edu-duration-icon {
    font-size: 12px;
  }

  .edu-video-body {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .edu-video-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
  }

  .edu-category-badge {
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  .edu-badge-primary {
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
  }

  .edu-badge-info {
    background: rgba(6, 182, 212, 0.1);
    color: #0891b2;
  }

  .edu-badge-success {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
  }

  .edu-badge-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
  }

  .edu-badge-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #b45309;
  }

  .edu-badge-purple {
    background: rgba(147, 51, 234, 0.1);
    color: #9333ea;
  }

  .edu-time-ago {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #5b6778;
    font-size: 13px;
  }

  .edu-time-icon {
    font-size: 12px;
  }

  .edu-video-title {
    font-size: 16px;
    font-weight: 700;
    color: #0a0a0a;
    margin-bottom: 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .edu-video-description {
    font-size: 14px;
    line-height: 1.5;
    color: #5b6778;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .edu-video-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
  }

  .edu-rating {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .edu-stars {
    display: flex;
    gap: 2px;
  }

  .edu-star-filled {
    color: #fbbf24;
    font-size: 12px;
  }

  .edu-rating-value {
    font-weight: 700;
    color: #0a0a0a;
    font-size: 14px;
  }

  .edu-reviews-count {
    color: #5b6778;
    font-size: 12px;
  }

  .edu-watch-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #2563eb;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
  }

  .edu-watch-icon {
    font-size: 10px;
    transition: transform 0.2s ease;
  }

  .edu-watch-link:hover .edu-watch-icon {
    transform: translateX(4px);
  }

  /*===========================================
          LEARNING PATH SECTION STYLES
        ===========================================*/
  .edu-path-wrapper {
    padding: 80px 0;
    background: white;
  }

  .edu-path-card {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    border-radius: 32px;
    padding: 60px;
    color: white;
    box-shadow: 0 30px 40px -20px rgba(37, 99, 235, 0.3);
  }

  .edu-path-header {
    text-align: center;
    margin-bottom: 48px;
  }

  .edu-path-title {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
  }

  .edu-path-subtitle {
    font-size: 18px;
    opacity: 0.9;
  }

  .edu-path-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 800px;
    margin: 0 auto;
  }

  .edu-path-step {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
  }

  .edu-path-step:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(10px);
  }

  .edu-step-number {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 20px;
    flex-shrink: 0;
  }

  .edu-step-content {
    flex: 1;
  }

  .edu-step-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: white;
  }

  /*===========================================
          NEWSLETTER SECTION STYLES
        ===========================================*/
  .edu-newsletter-wrapper {
    padding: 60px 0;
    background: #fafafa;
  }

  .edu-newsletter-card {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    background: white;
    border-radius: 32px;
    padding: 48px;
    box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f2f5;
  }

  .edu-newsletter-icon-wrapper {
    width: 80px;
    height: 80px;
    background: rgba(37, 99, 235, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
  }

  .edu-newsletter-icon {
    font-size: 36px;
    color: #2563eb;
  }

  .edu-newsletter-title {
    font-size: 32px;
    font-weight: 700;
    color: #0a0a0a;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
  }

  .edu-newsletter-text {
    font-size: 16px;
    line-height: 1.6;
    color: #5b6778;
    margin-bottom: 32px;
  }

  .edu-newsletter-form {
    max-width: 500px;
    margin: 0 auto;
  }

  .edu-input-group {
    display: flex;
    align-items: center;
    background: white;
    border: 1.5px solid #e4e7ec;
    border-radius: 100px;
    padding: 4px;
    margin-bottom: 16px;
  }

  .edu-input-group:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
  }

  .edu-input-icon {
    padding-left: 20px;
    color: #8b98a9;
    display: flex;
    align-items: center;
  }

  .edu-email-input {
    flex: 1;
    border: none;
    padding: 16px 12px;
    font-size: 15px;
    outline: none;
    background: transparent;
  }

  .edu-subscribe-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 100px;
    padding: 12px 28px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
  }

  .edu-subscribe-btn:hover {
    background: #1e40af;
    transform: scale(0.98);
  }

  .edu-subscribe-icon {
    font-size: 14px;
  }

  .edu-privacy-text {
    font-size: 13px;
    color: #8b98a9;
    margin: 0;
  }

  /*===========================================
          STATS SECTION STYLES
        ===========================================*/
  .edu-stats-wrapper {
    padding: 60px 0;
    background: white;
  }

  .edu-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
  }

  .edu-stat-item {
    text-align: center;
    padding: 24px;
    background: white;
    border-radius: 20px;
    transition: all 0.3s ease;
  }

  .edu-stat-item:hover {
    background: #f8fafc;
    transform: translateY(-3px);
  }

  .edu-stat-number {
    font-size: 44px;
    font-weight: 800;
    color: #2563eb;
    line-height: 1;
    margin-bottom: 8px;
  }

  .edu-stat-label {
    font-size: 13px;
    font-weight: 700;
    color: #5b6778;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  /*===========================================
          BACKGROUND COLOR UTILITIES
        ===========================================*/
  .edu-bg-primary-soft {
    background: rgba(37, 99, 235, 0.08);
  }

  .edu-bg-info-soft {
    background: rgba(6, 182, 212, 0.08);
  }

  .edu-bg-success-soft {
    background: rgba(34, 197, 94, 0.08);
  }

  .edu-bg-danger-soft {
    background: rgba(239, 68, 68, 0.08);
  }

  .edu-bg-warning-soft {
    background: rgba(245, 158, 11, 0.08);
  }

  .edu-bg-purple-soft {
    background: rgba(147, 51, 234, 0.08);
  }

  /*===========================================
          RESPONSIVE DESIGN
        ===========================================*/
  @media (max-width: 1200px) {
    .edu-video-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 992px) {
    .edu-hero-title {
      font-size: 42px;
    }

    .edu-featured-card {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .edu-path-card {
      padding: 40px;
    }
  }

  @media (max-width: 768px) {
    .edu-hero-title {
      font-size: 36px;
    }

    .edu-hero-description {
      font-size: 16px;
      margin: 0px;
    }

    .edu-path-wrapper {
      padding-top: 30px;
    }

    .edu-featured-icon-wrapper {
      width: 60px;
      height: 60px;
    }

    .edu-featured-icon {
      font-size: 30px;
    }

    .edu-video-grid {
      grid-template-columns: 1fr;
    }

    .edu-stats-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

    .edu-path-title {
      font-size: 28px;
    }

    .edu-path-step {
      border-radius: 20px;
    }

    .edu-newsletter-card {
      padding: 32px;
    }

    .edu-newsletter-title {
      font-size: 28px;
    }

    .edu-input-group {
      flex-direction: column;
      background: transparent;
      border: none;
      gap: 12px;
    }

    .edu-input-icon {
      display: none;
    }

    .edu-email-input {
      width: 100%;
      border: 1.5px solid #e4e7ec;
      border-radius: 100px;
      padding: 16px 20px;
    }

    .edu-subscribe-btn {
      width: 100%;
      justify-content: center;
    }
  }

  @media (max-width: 576px) {
    .edu-container {
      padding: 0 20px;
    }

    .edu-hero-wrapper {
      padding: 60px 0 30px;
    }

    .edu-hero-title {
      font-size: 32px;
    }

    .edu-category-header {
      flex-direction: column;
      gap: 16px;
      align-items: flex-start;
    }

    .edu-stats-grid {
      grid-template-columns: 1fr;
    }

    .edu-path-card {
      padding: 30px 20px;
    }

    .edu-path-step {
      flex-direction: column;
      text-align: center;
      border-radius: 20px;
    }

    .edu-stat-number {
      font-size: 36px;
    }
  }

  .edu-featured-content {
    text-align: center;
    margin-top: 20px;
  }

  @media(max-width:991px) {
    .fin-edu-warning-badge .d-flex.align-iteam-center svg {
      display: none;
    }

    .big-screen-hide {
      display: none !important;
    }

    .footer-btn {
      padding: 8px 15px;
    }
  }

  body {
    font-family: var(--font-geist-sans), -apple-system, BlinkMacSystemFont,
      "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
  }

  /* Video Popup Styles */
  .edu-video-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.3s ease;
  }

  .edu-video-popup-container {
    width: 90%;
    max-width: 1000px;
    max-height: 90vh;
    background: white;
    border-radius: 16px;
    position: relative;
    animation: slideUp 0.3s ease;
  }

  .edu-popup-close-btn {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    color: #333;
    transition: all 0.3s ease;
  }

  .edu-popup-close-btn:hover {
    transform: rotate(90deg);
    background: #f0f0f0;
  }

  .edu-popup-content {
    padding: 24px;
  }

  .edu-popup-video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    margin-bottom: 20px;
  }

  .edu-popup-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
  }

  .edu-popup-details {
    padding: 16px 0;
  }

  .edu-popup-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
  }

  .edu-popup-duration {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #666;
    font-size: 14px;
  }

  .edu-popup-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #1a1a1a;
  }

  .edu-popup-description {
    font-size: 16px;
    line-height: 1.6;
    color: #4a4a4a;
    margin-bottom: 20px;
  }

  .edu-popup-rating {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Play overlay for video thumbnails */
  .edu-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
  }

  .edu-video-thumbnail {
    position: relative;
  }

  .edu-video-thumbnail:hover .edu-play-overlay {
    opacity: 1;
  }

  .edu-play-icon {
    font-size: 48px;
    color: white;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  }

  /* Animations */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes slideUp {
    from {
      transform: translateY(50px);
      opacity: 0;
    }

    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
    .edu-video-popup-container {
      width: 95%;
      max-height: 95vh;
    }

    .edu-popup-close-btn {
      top: -35px;
      right: 0;
    }

    .edu-popup-title {
      font-size: 20px;
    }

    .edu-play-icon {
      font-size: 40px;
    }
  }

  /* Hover effect for video cards */
  .edu-video-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .edu-video-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  .checkbox-label,
  .acknowledge-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
  }

  .checkbox-input,
  .acknowledge-checkbox-input {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    cursor: pointer;
    opacity: 1;
    position: relative;
    z-index: 1;
  }

  /* Force checkbox to be visible */
  input[type="checkbox"] {
    opacity: 1 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    visibility: visible !important;
    display: inline-block !important;
    pointer-events: auto !important;
  }

  .insight-wrapper {
    padding: 40px 0;
  }

  .insight-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
  }

  /* Hero Section */
  .insight-hero {
    text-align: center;
    color: white;
    margin-bottom: 50px;
  }

  .insight-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgb(33 150 243 / 72%);
    backdrop-filter: blur(10px);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 14px;
    margin-bottom: 20px;
    border: 1px solid #2196F3;
  }

  .insight-badge svg {
    font-size: 18px;
  }

  .insight-hero h1 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #3F51B5;
  }

  .insight-hero h1 span {
    background: linear-gradient(135deg, #3F51B5 0%, #000000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .insight-hero p {
    font-size: 18px;
    opacity: 0.9;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
    color: #273f43;
  }

  /* Spotlight Card (Featured) */
  .spotlight-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    margin-bottom: 50px;
  }

  .spotlight-image {
    height: 100%;
    min-height: 300px;
    position: relative;
  }

  .spotlight-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .spotlight-content {
    padding: 40px;
  }

  .spotlight-tags {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
  }

  .spotlight-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
  }

  .spotlight-badge.purple {
    background: #667eea;
    color: white;
  }

  .spotlight-badge.blue {
    background: #17a2b8;
    color: white;
  }

  .spotlight-content h2 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #333;
    line-height: 1.3;
  }

  .spotlight-content p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 16px;
  }

  .spotlight-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
  }

  .meta-block {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #777;
    font-size: 14px;
  }

  .meta-block svg {
    color: #667eea;
  }

  .spotlight-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #667eea;
    font-weight: 600;
    text-decoration: none;
    font-size: 16px;
    transition: gap 0.3s;
  }

  .spotlight-link:hover {
    gap: 12px;
    color: #5a67d8;
  }

  /* Header Section */
  .insight-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
  }

  .insight-header h2 {
    font-size: 32px;
    font-weight: 600;
    color: #000;
    margin-bottom: 5px;
  }

  .insight-header p {
    color: #000;
    font-size: 16px;
  }

  .views-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgb(3 104 255 / 15%);
    backdrop-filter: blur(10px);
    padding: 10px 20px;
    border-radius: 50px;
    color: #000;
    border: 1px solid rgb(3 169 244 / 25%);
  }

  .views-pill svg {
    font-size: 18px;
  }

  /* Article Cards */
  .article-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
  }

  .article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  }

  .card-media {
    position: relative;
    height: 200px;
    overflow: hidden;
  }

  .card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
  }

  .article-card:hover .card-media img {
    transform: scale(1.1);
  }

  .topic-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: white;
    z-index: 1;
    backdrop-filter: blur(1px);
    background: #fcfffc7a;
  }

  .topic-tag.primary {
    background: #667eea;
  }

  .topic-tag.success {
    background: #48bb78;
  }

  .topic-tag.info {
    background: #17a2b8;
  }

  .topic-tag.warning {
    background: #ed8936;
  }

  .topic-tag.danger {
    background: #f56565;
  }

  .topic-tag.purple {
    background: #9f7aea;
  }

  .card-details {
    padding: 20px;
  }

  .article-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #777;
  }

  .article-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .article-meta svg {
    font-size: 14px;
    color: #667eea;
  }

  .card-details h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.4;
    color: #333;
  }

  .card-details h3 a {
    color: #333;
    text-decoration: none;
  }

  .card-details h3 a:hover {
    color: #667eea;
  }

  .card-details p {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid #eee;
  }

  .post-stats {
    display: flex;
    gap: 12px;
  }

  .stat-block {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #777;
  }

  .stat-block svg {
    font-size: 14px;
    color: #667eea;
  }

  .read-link {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #667eea;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
  }

  .read-link:hover {
    gap: 8px;
  }

  /* Show More Button */
  .show-more-wrapper {
    text-align: center;
    margin-top: 40px;
  }

  .expand-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: white;
    color: #667eea;
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  .expand-btn:hover {
    background: #667eea;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.3);
  }

  .expand-btn svg {
    transition: transform 0.3s;
  }

  .expand-btn:hover svg {
    transform: translateX(5px);
  }

  .post-count {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    margin-top: 10px;
  }

  /* Newsletter Section */
  .subscribe-card {
    background: white;
    border-radius: 20px;
    padding: 50px;
    text-align: center;
    margin-top: 50px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  }

  .subscribe-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: white;
    font-size: 24px;
  }

  .subscribe-card h3 {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
  }

  .subscribe-card p {
    color: #666;
    margin-bottom: 30px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }

  .subscribe-form {
    max-width: 500px;
    margin: 0 auto;
  }

  .input-group-custom {
    display: flex;
    gap: 10px;
    background: #f7f7f7;
    padding: 5px;
    border-radius: 50px;
    border: 1px solid #eee;
  }

  .input-icon {
    display: flex;
    align-items: center;
    padding-left: 15px;
    color: #999;
  }

  .subscribe-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 0;
    font-size: 15px;
    outline: none;
  }

  .subscribe-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
    white-space: nowrap;
  }

  .subscribe-btn:hover {
    transform: translateX(-2px);
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
  }

  /* Stats Section */
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
  }

  .stat-panel {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 25px;
    text-align: center;
    color: white;
  }

  .stat-number {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 5px;
  }

  .stat-label {
    font-size: 14px;
    opacity: 0.9;
    letter-spacing: 1px;
  }

  /* Responsive */
  @media (max-width: 991px) {
    .insight-hero h1 {
      font-size: 32px;
    }

    .spotlight-content {
      padding: 30px;
    }

    .spotlight-content h2 {
      font-size: 24px;
    }

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

  @media (max-width: 767px) {
    .insight-header {
      flex-direction: column;
      text-align: center;
      gap: 15px;
    }

    .spotlight-meta {
      flex-wrap: wrap;
      gap: 10px;
    }

    .subscribe-card {
      padding: 30px 20px;
    }

    .input-group-custom {
      flex-direction: column;
      background: transparent;
      gap: 15px;
    }

    .subscribe-btn {
      width: 100%;
      justify-content: center;
    }
  }

  @media (max-width: 480px) {
    .stats-grid {
      grid-template-columns: 1fr;
    }
  }

  .fx-blog-detail-wrapper {
    padding: 40px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  }


  /* Breadcrumb */
  .fx-blog-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 30px;
    color: #2196F3;
    font-size: 14px;
  }

  .fx-blog-breadcrumb a {
    color: #3F51B5;
    text-decoration: none;
    transition: opacity 0.2s;
  }

  .fx-blog-breadcrumb a:hover {
    opacity: 0.8;
    text-decoration: underline;
  }

  .fx-blog-breadcrumb-icon {
    font-size: 12px;
  }

  /* Header */
  .fx-blog-header {
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
    padding: 35px 0px;
  }

  .fx-blog-category {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }

  .fx-blog-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 30px;
    color: white;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3px;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .fx-blog-category-primary {
    background: linear-gradient(135deg, #667eea, #764ba2);
  }

  .fx-blog-category-success {
    background: linear-gradient(135deg, #11998e, #38ef7d);
  }

  .fx-blog-category-info {
    background: linear-gradient(135deg, #396afc, #2948ff);
  }

  .fx-blog-category-warning {
    background: linear-gradient(135deg, #f093fb, #f5576c);
  }

  .fx-blog-category-danger {
    background: linear-gradient(135deg, #eb3349, #f45c43);
  }

  .fx-blog-category-purple {
    background: linear-gradient(135deg, #8e2de2, #4a00e0);
  }

  .fx-blog-reading-time {
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgb(0 0 0 / 65%);
    font-size: 14px;
  }

  .fx-blog-title {
    font-size: 42px;
    font-weight: 800;
    color: #000;
    margin: 0 0 20px;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    max-width: 900px;
  }

  .fx-blog-meta-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .fx-blog-author {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .fx-blog-author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid white;
  }

  .fx-blog-author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .fx-blog-author-details {
    display: flex;
    flex-direction: column;
  }

  .fx-blog-author-name {
    color: #000;
    font-weight: 600;
    font-size: 16px;
  }

  .fx-blog-author-title {
    color: #2196F3;
    font-size: 13px;
  }

  .fx-blog-stats {
    display: flex;
    align-items: center;
    gap: 20px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
  }

  .fx-blog-stats span {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #000;
  }

  /* Featured Image */
  .fx-blog-featured-image {
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    height: 400px;
  }

  .fx-blog-featured-image img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Content Wrapper */
  .fx-blog-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 40px;
    margin-bottom: 50px;
  }

  /* Main Content */
  .fx-blog-main {
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    position: relative;
  }

  /* Share Sidebar */
  .fx-blog-share-sidebar {
    position: absolute;
    left: -75px;
    top: 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: white;
    padding: 15px 10px;
    border-radius: 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  }

  .fx-blog-share-label {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    margin-bottom: 5px;
  }

  .fx-blog-share-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .fx-blog-share-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  }

  .fx-blog-share-facebook {
    background: #1877f2;
  }

  .fx-blog-share-twitter {
    background: #1da1f2;
  }

  .fx-blog-share-linkedin {
    background: #0077b5;
  }

  .fx-blog-share-whatsapp {
    background: #25d366;
  }

  .fx-blog-share-email {
    background: #ea4335;
  }

  /* Blog Body */
  .fx-blog-body {
    color: #333;
    line-height: 1.8;
  }

  .fx-blog-body h2 {
    font-size: 28px;
    font-weight: 700;
    color: #222;
    margin: 30px 0 20px;
  }

  .fx-blog-body h3 {
    font-size: 22px;
    font-weight: 600;
    color: #333;
    margin: 25px 0 15px;
  }

  .fx-blog-body p {
    margin: 0 0 20px;
    font-size: 16px;
    color: #3F51B5;
  }

  .fx-blog-body ul,
  .fx-blog-body ol {
    margin: 0 0 20px;
    padding-left: 20px;
  }

  .fx-blog-body li {
    margin: 0 0 10px;
  }

  .fx-blog-body blockquote {
    margin: 30px 0;
    padding: 20px 30px;
    background: linear-gradient(135deg, #667eea10, #764ba210);
    border-radius: 0 10px 10px 0;
    font-style: italic;
    color: #555;
  }

  /* Tags */
  .fx-blog-tags {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 40px 0 30px;
    padding: 20px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
  }

  .fx-blog-tags-label {
    font-weight: 600;
    color: #333;
  }

  .fx-blog-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .fx-blog-tag-item {
    padding: 5px 15px;
    background: #f0f0f0;
    border-radius: 20px;
    color: #555;
    text-decoration: none;
    font-size: 13px;
    transition: all 0.3s ease;
  }

  .fx-blog-tag-item:hover {
    background: #667eea;
    color: white;
  }

  /* Actions */
  .fx-blog-actions {
    margin-bottom: 40px;
  }

  .fx-blog-action-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
  }

  .fx-blog-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid #e0e0e0;
    background: white;
    border-radius: 30px;
    color: #666;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .fx-blog-action-btn:hover {
    background: #667eea;
    color: white;
    border-color: #667eea;
  }

  .fx-blog-action-active {
    background: #667eea;
    color: white;
    border-color: #667eea;
  }

  /* Author Bio */
  .fx-blog-author-bio {
    display: flex;
    gap: 25px;
    padding: 30px;
    background: #f8f9fa;
    border-radius: 15px;
    margin: 40px 0;
  }

  .fx-blog-author-bio-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
  }

  .fx-blog-author-bio-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .fx-blog-author-bio-content h4 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 10px;
  }

  .fx-blog-author-bio-content p {
    color: #666;
    line-height: 1.6;
    margin: 0 0 15px;
  }

  .fx-blog-author-social {
    display: flex;
    gap: 10px;
  }

  .fx-blog-author-social-link {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    transition: all 0.3s ease;
  }

  .fx-blog-author-social-link:hover {
    background: #667eea;
    color: white;
  }

  /* Comments */
  .fx-blog-comments {
    margin-top: 50px;
  }

  .fx-blog-comments h3 {
    font-size: 22px;
    font-weight: 600;
    color: #333;
    margin: 0 0 20px;
  }

  .fx-blog-comment-form {
    margin-bottom: 30px;
  }

  .fx-blog-comment-form textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    margin-bottom: 15px;
  }

  .fx-blog-comment-form textarea:focus {
    outline: none;
    border-color: #667eea;
  }

  .fx-blog-submit-comment {
    padding: 12px 30px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 30px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .fx-blog-submit-comment:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
  }

  .fx-blog-comments-list {
    margin-top: 30px;
  }

  .fx-blog-single-comment {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
  }

  .fx-blog-comment-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
  }

  .fx-blog-comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .fx-blog-comment-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 8px;
    flex-wrap: wrap;
  }

  .fx-blog-commenter-name {
    font-weight: 600;
    color: #333;
  }

  .fx-blog-comment-date {
    font-size: 12px;
    color: #999;
  }

  .fx-blog-comment-content p {
    color: #666;
    margin: 0 0 10px;
    line-height: 1.6;
  }

  .fx-blog-comment-reply {
    padding: 5px 15px;
    background: none;
    border: 1px solid #e0e0e0;
    border-radius: 15px;
    color: #666;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .fx-blog-comment-reply:hover {
    background: #667eea;
    color: white;
    border-color: #667eea;
  }

  /* Sidebar */
  .fx-blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .fx-blog-widget {
    background: white;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  .fx-blog-widget h3 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
  }

  /* Related Posts */
  .fx-blog-related-posts {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .fx-blog-related-item {
    display: flex;
    gap: 15px;
    text-decoration: none;
    padding: 10px;
    border-radius: 10px;
    transition: background 0.3s ease;
  }

  .fx-blog-related-item:hover {
    background: #f8f9fa;
  }

  .fx-blog-related-image {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
  }

  .fx-blog-related-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .fx-blog-related-content h4 {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px;
    line-height: 1.4;
  }

  .fx-blog-related-date {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #999;
  }

  /* Popular Posts */
  .fx-blog-popular-posts {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .fx-blog-popular-item {
    display: flex;
    gap: 15px;
    text-decoration: none;
    padding: 10px;
    border-radius: 10px;
    transition: background 0.3s ease;
  }

  .fx-blog-popular-item:hover {
    background: #f8f9fa;
  }

  .fx-blog-popular-image {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
  }

  .fx-blog-popular-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .fx-blog-popular-content h4 {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px;
    line-height: 1.4;
  }

  .fx-blog-popular-meta {
    display: flex;
    gap: 10px;
    font-size: 12px;
    color: #999;
  }

  .fx-blog-popular-meta span {
    display: flex;
    align-items: center;
    gap: 3px;
  }

  /* Categories */
  .fx-blog-category-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .fx-blog-category-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    color: #666;
    text-decoration: none;
    border-bottom: 1px dashed #eee;
    transition: color 0.3s ease;
  }

  .fx-blog-category-item:hover {
    color: #667eea;
  }

  .fx-blog-category-item span {
    color: #999;
    font-size: 13px;
  }

  /* Newsletter */
  .fx-blog-newsletter {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
  }

  .fx-blog-newsletter h3 {
    color: white;
    border-bottom-color: rgba(255, 255, 255, 0.2);
  }

  .fx-blog-newsletter p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    margin-bottom: 20px;
  }

  .fx-blog-newsletter-form {
    display: flex;
    gap: 10px;
  }

  .fx-blog-newsletter-form input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    color: white;
    font-size: 14px;
  }

  .fx-blog-newsletter-form input::placeholder {
    color: rgba(255, 255, 255, 0.6);
  }

  .fx-blog-newsletter-form input:focus {
    outline: none;
    border-color: white;
  }

  .fx-blog-newsletter-form button {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: none;
    background: white;
    color: #667eea;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .fx-blog-newsletter-form button:hover {
    transform: translateX(5px);
  }

  /* Navigation */
  .fx-blog-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 40px;
  }


  /* Responsive */
  @media (max-width: 1024px) {
    .fx-blog-content-wrapper {
      grid-template-columns: 1fr;
    }

    .fx-blog-share-sidebar {
      position: static;
      flex-direction: row;
      justify-content: center;
      margin-bottom: 30px;
      padding: 15px 20px;
      align-items: center;
    }

    .fx-blog-share-label {
      margin-bottom: 0;
      margin-right: 10px;
    }

    .fx-blog-navigation {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 768px) {
    .fx-blog-title {
      font-size: 32px;
    }

    .fx-blog-meta-info {
      flex-direction: column;
      align-items: flex-start;
    }

    .fx-blog-main {
      padding: 12px;
    }

    .fx-blog-container {
      padding: 0 5px !important;
    }

    .fx-blog-author-bio {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .fx-blog-author-social {
      justify-content: center;
    }

    .fx-blog-tags {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  .fx-blog-detail-wrapper {
    padding: 30px 0;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    min-height: 100vh;
  }

  .fx-blog-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
  }

  .fx-blog-error-state {
    text-align: center;
    padding: 80px 20px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  }

  .fx-blog-error-state svg {
    color: #ef4444;
    margin-bottom: 20px;
  }

  .fx-blog-error-state h2 {
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
  }

  .fx-blog-error-state p {
    color: #64748b;
    margin-bottom: 24px;
  }

  .fx-blog-back-to-blog {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #2563eb;
    color: white;
    text-decoration: none;
    border-radius: 8px;
  }



  .edu-popup-video-wrapper {
    width: 100%;
    margin-bottom: 20px;
    background: #000;
    /* Background black so pata chale */
    min-height: 200px;
    /* Minimum height so visible */
  }

  .edu-popup-video {
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
    background: #000;
  }

  .video-background {
    border-radius: 12px;
    overflow: hidden;
  }

  @media(max-width:991px) {
    .insight-hero p {
      font-size: 16px;
      opacity: 0.9;
      max-width: 700px;
      margin: 0px 15px;
      line-height: 1.6;
      color: #273f43;
    }

    .fx-blog-stats {
      display: flex;
      align-items: center;
      gap: 20px;
      color: rgba(255, 255, 255, 0.8);
      font-size: 14px;
      flex-wrap: wrap;
      justify-content: center;
    }
  }


  .card-1 {
    background: linear-gradient(to right, #FFF2E0, #FFF2E1);
  }

  .card-2 {
    background: linear-gradient(to right, #E6FDEE, #E5FCED);
  }

  .card-3 {
    background: linear-gradient(to right, #E5F0FE, #E4EFFE);
  }

  .card-4 {
    background: linear-gradient(to right, #DFFCED, #DDFBEC);
  }

  .card-8 {
    background: linear-gradient(to right, #FFF2E0, #FFF2E1);
    border: 1px solid #fb923c !important;
  }

  .card-5 {
    background: linear-gradient(to right, #F5EDFF, #F7F0FF);
    border: 1px solid #cbacf1 !important;
  }

  .card-6 {
    background: linear-gradient(to right, #DCEBFE, #EEF5FF);
    border: 1px solid #8abcff !important;
  }

  .card-7 {
    background: linear-gradient(to right, #E4FCEC, #EEFDF2);
    border: 1px solid #b5c5b9 !important;
  }

  .card-1:hover {
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 31%) !important;
    transition: .5s all ease;
  }

  .card-2:hover {
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 31%) !important;
    transition: .5s all ease;
  }

  .card-3:hover {
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 31%) !important;
    transition: .5s all ease;
  }

  .card-4:hover {
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 31%) !important;
    transition: .5s all ease;
  }

  .gradient-2 {
    background: linear-gradient(90deg, #5b6cf9 0%, #9b4dff 50%, #ff3ea5 100%);
  }

  .border-bottom-orenge {
    border-bottom: 1px solid #fb923c66;
  }

  .search-input-padding-add {
    padding: 0px 40px;
  }

  .search-icon {
    top: 35%;
  }

  ::-webkit-scrollbar-thumb {
    background: #fb923c;
    border-radius: 10px;
  }

  .button-bg-1 {
    background: #F54900;
  }

  .button-bg-1:hover {
    background: #f54b00;
  }

  .card-text-orange {
    color: #ca3500;
  }

  
.sb-menu-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
.bg-gradient-to-r {
    background: radial-gradient(circle, rgb(255 242 224) 0%, rgb(255 105 0) 100%);
}