:root,
[data-bs-theme="light"] {
  --bs-primary: #FF7400;
  --bs-primary-rgb: 255 116 0;
  --bs-primary-10: #ff740014;
  --bs-secondary: #2D2C2B;
  --bs-bg-one: #FFF8F1;
  --black: #000;
  --bs-dark: #121212;
  --bs-gray: #999;
  --bs-yellow: #F90;
  --bs-green: #16A34A;
  --bs-green-60: #DCFCE7;
  --skyblue: #74BDDD;
  --skyblue-900: #52B8DB;
  --skyblue-300: #CDF0FF;
  --skyblue-1: #72D0F9;
  --skyblue-8: #74bddd14;
  --bs-heading-color: var(--bs-secondary);
  --bs-f8f9fa: #F8F9FA;
  /* --skyblue:#74BDDD; */
  --bs-secondary-20: #2D2C2B78;
  --bs-secondary-60: #2D2C2B99;
  --bs-secondary-70: #2D2C2BB2;
  --bs-secondary-80: #2D2C2BCC;
  --bs-secondary-90: #2D2C2BEB;
  --bs-2d2c2b-80: #2d2c2bcc;
  /**/
  --px-primary: var(--bs-primary);
  --px-primary-hover: #E56800;
  --px-primary-light: #FFF7ED;
  --px-primary-10: #ff740014;
  --px-success: #22C55E;
  --px-success-light: var(--bs-green-60);
  --px-warning: #F59E0B;
  --px-warning-light: #FEF3C7;
  --px-danger: #EF4444;
  --px-info: #0EA5E9;
  --px-purple: #8B5CF6;
  --px-purple-light: #EDE9FE;
  --px-dark: #0f172a;
  --px-heading: var(--bs-heading-color);
  --px-text: var(--bs-secondary);
  --px-text-muted: #64748b;
  --px-text-light: #94a3b8;
  --px-bg: #f8fafc;
  --px-card: #fff;
  --px-shadow: 0 4px 20px -2px #0000000d;
  --px-shadow-hover: 0 8px 30px -4px #0000001a;
  --px-radius: 20px;
  --px-radius-sm: 16px;
  --px-radius-xs: 12px;
  /**/
  --bs-transition: .2s;
  --bs-link-hover: var(--bs-primary);
  --bs-success: #16A34A;
  /* NEW (used by this section) */
  --bs-muted: #6B6F76;
  /* secondary text */
  --bs-border: #E6E8EC;
  /* subtle borders */
  --bs-surface: #FFF;
  /* plain white surface */
  --bs-rail-dot: color-mix(in oklab, var(--bs-secondary) 28%, transparent);
  /* dotted-rail color */
  --bs-font-family: 'BR Hendrix', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --px-font: var(--bs-font-family);
  /* --video-width: 720px; */
  /* --thumb-size: 16px; */
  /* swiper  */
  --swiper-navigation-size: 18px;
  --swiper-navigation-color: #0000004D;
  /* badge  card  */
  --px-card: #fff;
  --px-bg: #f8fafc;
  --px-border: #e5e7eb;
  --px-focus: #00B3C7;
  --px-rad: 16px;
  --sh-sm: 0 1px 2px #0000000f 0 4px 14px #0000000f;
  --sh-lg: 0 8px 24px #0000001a;
  --s8: 8px;
  --s12: 12px;
  --s16: 16px;
  --s24: 24px;
  --s32: 32px;
  --bs-link-color: var(--bs-primary);
  --bs-link-color-rgb: 255 116 0
}

* {
  scrollbar-color: rgba(var(--bs-primary-rgb), .4) #fff0;
  scrollbar-width: thin
}

@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-color: rgba(var(--bs-primary-rgb), .4) #fff0;
    scrollbar-width: thin
  }
}

::selection {
  background-color: var(--bs-primary);
  color: rgba(var(--bs-white-rgb), 100%)
}

* {
  box-sizing: border-box
}

body {
  /* background:var(--px-bg); */
  color: var(--px-text);
  font-family: var(--px-font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 500;
  line-height: 1.2;
  color: var(--bs-heading-color)
}

.streak-wrap {
  background-color: #F5F5F5 !important;
  border-top: 1px solid #0F11131A
}

.offcanvas {
  --bs-offcanvas-height: 100vh
}

.offcanvas.thread-form {
  --bs-offcanvas-height: 50vh
}

.spacer.py-300 {
  padding-block: clamp(80px, 15vh, 250px)
}

.tooltip {
  --bs-tooltip-zindex: 1080;
  --bs-tooltip-max-width: 10rem;
  --bs-tooltip-padding-x: .5rem;
  --bs-tooltip-padding-y: .25rem;
  --bs-tooltip-margin: ;
  --bs-tooltip-font-size: .875rem;
  --bs-tooltip-color: var(--bs-body-bg);
  --bs-tooltip-bg: var(--bs-emphasis-color);
  --bs-tooltip-border-radius: var(--bs-border-radius);
  --bs-tooltip-opacity: .9;
  --bs-tooltip-arrow-width: .8rem;
  --bs-tooltip-arrow-height: .4rem
}



/* #topbar{

  background-color: var(--bs-primary-10) !important;

  border-top: 1px solid #0F11131A;

} */
.bg-primary {
  background-color: var(--bs-primary) !important
}

.bg-primary-10 {
  background-color: var(--bs-primary-10)
}

.bg-secondry {
  background-color: var(--bs-secondary)
}

.bg-main {
  background-color: var(--bs-bg-one)
}

.bg-yellow {
  background-color: var(--bs-yellow)
}

.bg-skyblue-10 {
  background-color: #74BDDD1A
}

.bg-00000014 {
  background-color: #00000014
}

.bg-green {
  background-color: var(--bs-green)
}

.bg-skyblue {
  background-color: var(--skyblue)
}

.bg-8AC0D3-10 {
  background-color: #8AC0D31A
}

.bg-skyblue-8 {
  background-color: var(--skyblue-8)
}

.bg-787878-7 {
  background-color: #78787812
}

.bg-2A1300 {
  background-color: #2A1300 !important
}

.bg-F9F9F9 {
  background-color: #F9F9F9 !important
}

.bg-282828 {
  background-color: #282828
}

.bg-353535 {
  background-color: #353535
}

.bg-626262 {
  background-color: #626262
}

.badge__yellow {
  background-color: #FCB734 !important
}

.text-primary {
  color: var(--bs-primary) !important
}

.tAccent {
  color: var(--bs-secondary) !important
}

.tAccent-20 {
  color: var(--bs-secondary-20)
}

.tAccent-60 {
  color: var(--bs-secondary-60)
}

.tAccent-70 {
  color: var(--bs-secondary-70) !important
}

.tAccent-80 {
  color: var(--bs-secondary-80)
}

.tAccent-90 {
  color: var(--bs-secondary-90)
}

.t-dark {
  color: var(--bs-dark)
}

.text-black-70 {
  --bs-text-opacity: 1;
  color: #000000b3 !important
}

.text-black-80 {
  --bs-text-opacity: 1;
  color: #000c !important
}

.text-black-90 {
  --bs-text-opacity: 1;
  color: #000000e6 !important
}

.text-gray {
  color: var(--bs-gray)
}

.text-303030 {
  color: #303030
}

.text-434855 {
  color: #434855
}

.text-8D8D8D {
  color: #8D8D8D
}

.text-44423F {
  color: #44423F
}

.text-4B4C4D {
  color: #4B4C4D
}

.text-535251 {
  color: #535251
}

.text-skyblue {
  color: var(--skyblue)
}

.text-white-90 {
  --bs-text-opacity: 1;
  color: #ffffffe6 !important
}

.text-444951 {
  color: #444951
}

.text-3F2314 {
  color: #3F2314
}

.text-primary {
  color: var(--bs-primary) !important
}

.tAccent {
  color: var(--bs-secondary) !important
}

.tAccent-60 {
  color: var(--bs-secondary-60)
}

.t-dark {
  color: var(--bs-dark)
}

.text-black-70 {
  --bs-text-opacity: 1;
  color: #000000b3 !important
}

.text-black-80 {
  --bs-text-opacity: 1;
  color: #000c !important
}

.text-black-90 {
  --bs-text-opacity: 1;
  color: #000000e6 !important
}

.text-gray {
  color: var(--bs-gray)
}

.text-303030 {
  color: #303030
}

.text-434855 {
  color: #434855
}

.text-44423F {
  color: #44423F
}

.text-4B4C4D {
  color: #4B4C4D
}

.text-skyblue {
  color: var(--skyblue)
}

.text-white-90 {
  --bs-text-opacity: 1;
  color: #ffffffe6 !important
}

.text-444951 {
  color: #444951
}

.text-2D2C2BCC {
  color: #2D2C2BCC
}

.text-303030 {
  color: #303030
}

.text-434855 {
  color: #434855
}

.text-44423F {
  color: #44423F
}

.text-4B4C4D {
  color: #4B4C4D
}

.text-skyblue {
  color: var(--skyblue)
}

.text-white-80 {
  --bs-text-opacity: 1;
  color: #fffc !important
}

.text-white-90 {
  --bs-text-opacity: 1;
  color: #ffffffe6 !important
}

.text-444951 {
  color: #444951
}

.text-yellow {
  color: var(--bs-yellow)
}

.bg-cover {
  background-size: cover
}

.bg-no-repeat {
  background-repeat: no-repeat
}

.bg-start {
  background-position: left
}

.bg-end {
  background-position: right
}

.bg-top {
  background-position: top
}

.bg-bottom {
  background-position: bottom
}

.rounded-20 {
  border-radius: 20px
}

.rounded-24 {
  border-radius: 24px
}

.text-nowrap {
  white-space: nowrap
}

.list-style-none {
  list-style: none
}

.shadow_1 {
  box-shadow: 0 2px 0 #413d4533
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 500;
  line-height: 1.2;
  color: var(--bs-heading-color)
}

p {
  margin: 0
}

/* header  */
/* .header_container{padding-inline: 36px; padding-block: 1rem;}
header .offcanvas-body{margin-left: 70px;} */
/* .navbar.header-navbar{--bs-navbar-toggler-focus-width:0;} */
/* Pills */
.pill {
  border-radius: 999px;
  padding: .35rem .65rem;
  font-weight: 600;
  background: #fff;
  border: 1px solid #e6e6e9
}

.pill-xp {
  background: #22c55e1f;
  color: #166534;
  border-color: #22c55e40
}

.objective {
  border-left: 6px solid var(--bs-primary);
  border-radius: 1rem
}

.dark-swiper {
  top: 40px
}

.dark-swiper.course-next {
  right: 20px
}

.dark-swiper.course-prev {
  left: 20px
}

.dark-swiper:after {
  content: '';
  width: 24px;
  height: 50px;
  top: 0;
  position: absolute;
  background-repeat: no-repeat;
  background-image: url(../media/arrow-next.svg)
}

.dark-swiper.course-prev:after {
  background-image: url(../media/arrow-prev.svg)
}

/* search bar  */
.search_icon {
  transition: all .35s ease
}

#searchCollapse.collapse:not(.show) {
  display: block;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: all .35s ease
}

#searchCollapse.collapse.show {
  max-width: 280px;
  opacity: 1
}

.search_icon.collapsed {
  display: block
}

.search_icon {
  display: none
}

/* .navbar-nav.header-bar .nav-link{color:#000;}

.navbar-nav.header-bar .nav-link:hover{color: var(--bs-primary);} 

.navbar-nav{--bs-nav-link-hover-color:var(--bs-primary);} */
/* scroll header  */
/* header{transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;will-change: transform, background-color, box-shadow;backdrop-filter: saturate(1.1) blur(6px);} */
/* .user-menu:not(.sitebar-user){padding: 7px 14px;background: var(--bs-primary);border-radius: 20px;}

.user-menu:not(.sitebar-user)  button.btn{font-size: 18px;padding: 0 !important;}

.avatar-circle-btn{padding: 8px 11px;font-size: 20px;background: var(--bs-primary) !important;} */

/* custom select dropdown - piplix start */
/* =========================

   CSS Variables

========================= */
:root {
  /* Sizing */
  --cs-width: 100%;
  --cs-height: 50px;
  --cs-radius-lg: 50rem;
  --cs-radius-md: 1rem;
  --cs-dropdown-height: 200px;
  /* Spacing */
  --cs-padding-x: 1.125rem;
  --cs-padding-y: .75rem;
  --cs-gap: 6px;
  /* Typography */
  --cs-font: var(--bs-font-family);
  --cs-font-sm: 13px;
  --cs-font-md: var(--bs-body-font-size);
  --cs-font-weight-label: 600;
  /* Colors */
  --cs-text-main: var(--black);
  --cs-text-muted: #6b7280;
  --cs-text-label: #1f2937;
  --cs-bg: #fff;
  --cs-bg-disabled: #f3f4f6;
  --cs-bg-hover: #e6f0ff;
  --cs-bg-selected: #dbeafe;
  --cs-border: #D1D5DB;
  --cs-border-focus: #60a5fa;
  --cs-border-error: #ef4444;
  --cs-border-success: #22c55e;
  /* Touch Variables */
  --cs-touch-height: 48px;
  --cs-touch-option-padding: 12px 16px;
  --cs-touch-font: 15px;
  /* Effects */
  --cs-shadow-dropdown: 0 10px 25px #00000026;
  --cs-shadow-focus: 0 0 0 3px #60a5fa40;
  /* Transitions */
  --cs-transition-fast: .2s ease;
  --cs-transition-rotate: .25s ease
}

/* =========================

   Root

========================= */
.cs-field {
  width: var(--cs-width);
  font-family: var(--cs-font)
}

/* Hide native select (accessible) */
.cs-native {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0
}

/* =========================

   Label

========================= */
.cs-label {
  display: block;
  margin-bottom: var(--cs-gap);
  font-size: var(--cs-font-sm);
  font-weight: var(--cs-font-weight-label);
  color: var(--cs-text-label)
}

.cs-required {
  color: var(--cs-border-error)
}

/* =========================

   Select Wrapper

========================= */
.cs-select {
  position: relative
}

/* =========================

   Control

========================= */
.cs-control {
  height: var(--cs-height);
  width: var(--cs-width);
  padding: .75rem var(--cs-padding-x);
  color: var(--bs-black);
  background: var(--cs-bg);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: border-color var(--cs-transition-fast), box-shadow var(--cs-transition-fast)
}

.cs-control:focus {
  outline: none;
  border-color: var(--cs-border-focus);
  box-shadow: var(--cs-shadow-focus)
}

/* =========================

   Value

========================= */
.cs-value {
  font-size: var(--cs-font-md);
  color: var(--cs-text-main);
  line-height: 1
}

/* =========================

   Chevron

========================= */
.cs-chevron {
  width: 11px;
  height: 12px;
  margin-top: -4px;
  border-right: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
  transform: rotate(45deg);
  transition: transform var(--cs-transition-rotate)
}

.cs-select.open .cs-chevron {
  transform: rotate(-135deg)
}

/* =========================

   Dropdown

========================= */
.cs-dropdown {
  position: absolute;
  top: calc(100% + var(--cs-gap));
  left: 0;
  right: 0;
  background: var(--cs-bg);
  border-radius: var(--cs-radius-md);
  box-shadow: var(--cs-shadow-dropdown);
  max-height: var(--cs-dropdown-height);
  padding: 0;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--cs-transition-fast), transform var(--cs-transition-fast);
  z-index: 100
}

.cs-dropdown .cs-dropdown-wrap {
  padding: .5rem 0
}

.cs-select.open .cs-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto
}

/* =========================

   Search

========================= */
.cs-search {
  width: calc(100% - 24px);
  margin: 0;
  padding: 1rem;
  font-size: var(--cs-font-sm);
  border-radius: var(--cs-radius-md);
  border: 1px solid var(--cs-border)
}

.cs-search:focus {
  outline: none;
  border-color: var(--cs-border-focus)
}

/* =========================

   List

========================= */
.cs-list {
  /* max-height: 130px; */
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0
}

/* =========================

   Option

========================= */
.cs-option {
  padding: var(--cs-padding-y) var(--cs-padding-x);
  font-size: var(--cs-font-md);
  color: var(--cs-text-main);
  cursor: pointer
}

.cs-option:hover,
.cs-option.focused {
  background: var(--cs-bg-hover)
}

.cs-option.cs-active {
  background: var(--cs-bg-selected)
}

/* =========================

   States

========================= */
.cs-select.error .cs-control {
  border-color: var(--cs-border-error)
}

.cs-select.success .cs-control {
  border-color: var(--cs-border-success)
}

.cs-select.disabled .cs-control {
  background: var(--cs-bg-disabled);
  cursor: not-allowed;
  opacity: .7
}

/* =========================

   Touch Devices

========================= */
@media (hover: none) and (pointer: coarse) {

  /* Control */
  .cs-control {
    height: var(--cs-touch-height);
    padding: 0 16px
  }

  .cs-value {
    font-size: var(--cs-touch-font)
  }

  /* Chevron */
  .cs-chevron {
    width: 8px;
    height: 8px;
    border-width: 2px
  }

  /* Dropdown */
  .cs-dropdown {
    max-height: 55vh;
    border-radius: 18px;
    box-shadow: 0 12px 32px #00000040
  }

  /* Options */
  .cs-option {
    padding: var(--cs-touch-option-padding);
    font-size: var(--cs-touch-font)
  }

  /* Search */
  .cs-search {
    font-size: var(--cs-touch-font);
    padding: 10px 12px
  }
}

/* =========================

   Safe Area (iOS)

========================= */
@supports (padding: env(safe-area-inset-bottom)) {
  .cs-dropdown {
    padding-bottom: env(safe-area-inset-bottom)
  }
}

/* =========================

   Momentum Scrolling

========================= */
.cs-dropdown,
.cs-list {
  -webkit-overflow-scrolling: touch
}

/* =========================

   Tap Feedback

========================= */
.cs-option:active {
  background: var(--cs-bg-selected)
}

/* =========================

   Prevent Accidental Text Selection

========================= */
.cs-control,
.cs-option {
  user-select: none;
  -webkit-tap-highlight-color: transparent
}

/* =========================

   Small Screens

========================= */


/* custom select dropdown - piplix end */
/* quiz  */
.progress-wrap.quiz-progress .progressbar {
  height: 16px;
  background: #0000001A;
  border-radius: 10rem;
  overflow: hidden;
  flex: 1;
  margin-right: 18px
}

.progress-wrap.quiz-progress .progressbar>span {
  display: block;
  height: 100%;
  background: var(--bs-primary);
  width: 0
}

.opt input {
  display: none
}

.options {
  display: grid;
  gap: 18px;
  margin-top: 10px
}

.opt {
  cursor: pointer;
  border: 2px solid #D9D9D9;
  background: var(--opt-bg);
  border-radius: 72px;
  font-size: 19px;
  font-weight: 500;
  padding: 18px 30px;
  position: relative
}

.opt:after {
  content: '';
  width: 35px;
  height: 35px;
  position: absolute;
  right: 27px;
  top: 12px;
  background-size: cover;
  background-position: center
}

.opt.correct::after {
  background-image: url(../media/right-ansr.svg)
}

.opt.wrong::after {
  background-image: url(../media/wrong-ansr.svg)
}

.opt:hover {
  background: var(--opt-hover)
}

/* .opt input{accent-color:var(--accent)} */
/* .opt.locked{opacity:.65; cursor:default} */
.opt.correct {
  border-color: #16A34A;
  background: #DCFCE733
}

.opt.wrong {
  border-color: #EA2B2B;
  background: #EA2B2B33
}

/* .header-transparent{margin-bottom: -100px;background: transparent;backdrop-filter: none;border: 0;}

.header-light{background-color: #fff; margin: 0; border-bottom: 1px solid #0F111314;}

.fix-header{margin-bottom: 0px;background: #fff;} */


.fs-10 {
  font-size: .625rem
}

.fs-11 {
  font-size: .6875rem
}

.fs-12 {
  font-size: .75rem
}

.fs-14 {
  font-size: 14px
}

.fs-15 {
  font-size: 15px
}

.fs-17 {
  font-size: clamp(14px, 2vw, 17.33px)
}

.fs-18 {
  font-size: clamp(15px, 2vw, 18px)
}

.fs-20 {
  font-size: clamp(16px, 2vw, 20px)
}

.fs-22 {
  font-size: clamp(18px, 2vw, 22px)
}

.fs-26 {
  font-size: clamp(18px, 2vw, 26px)
}

.fs-30 {
  font-size: clamp(22px, 2vw, 30px)
}

.fs-34 {
  font-size: clamp(24px, 2vw, 34px)
}

.fs-38 {
  font-size: clamp(24px, 2vw, 38px)
}

.fs-45 {
  font-size: clamp(28px, 3vw, 45px)
}

.fs-64 {
  font-size: clamp(45px, 3.5vw, 64px)
}

.pb-35 {
  padding-bottom: 2.1875rem
}

/* btn  */
a.link-primary {
  color: var(--bs-primary) !important;
  /* --bs-link-color-rgb:red; */
  text-decoration: none
}

.link-black {
  color: #000
}

.link-black:hover {
  color: var(--bs-primary) !important
}

a.link-primary.dark:hover {
  color: var(--bs-secondary) !important
}

a.link-primary.dark.with-icon:hover svg path {
  fill: var(--bs-secondary) !important
}

a.link-skyblue {
  color: var(--skyblue)
}

a.link-secondary {
  color: var(--bs-secondary) !important
}

.btn:not([data-toggle-password]) {
  --bs-btn-padding-x: 1.875rem;
  --bs-btn-padding-y: 1rem;
  --bs-btn-font-family: var(--bs-font-family);
  --bs-btn-font-size: 1.375rem;
  --bs-btn-font-weight: 500;
  --bs-btn-line-height: 1;
  border-radius: 50px
}

.btn.btn-small {
  --bs-btn-padding-x: 2.125rem;
  --bs-btn-padding-y: .8125rem;
  --bs-btn-font-family: var(--bs-font-family);
  --bs-btn-font-size: 1.375rem;
  --bs-btn-font-weight: 600;
  --bs-btn-line-height: 1.4;
  border-radius: 50px
}

.btn.cta-btn {
  --bs-btn-padding-x: 3.125rem;
  --bs-btn-padding-y: 1.1rem;
  --bs-btn-font-family: var(--bs-font-family);
  --bs-btn-font-size: 1.375rem;
  --bs-btn-font-weight: 600;
  --bs-btn-line-height: 1;
  border-radius: 50px
}

.btn.btn-sm {
  --bs-btn-padding-x: 1.4375rem;
  --bs-btn-padding-y: .5625rem;
  --bs-btn-font-family: var(--bs-font-family);
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 600;
  --bs-btn-line-height: 1.1875rem;
  /* color: var(--bs-btn-color); */
  border-radius: 50px
}

.btn.btn-sm.btn-sm-2 {
  --bs-btn-padding-x: 1.4375rem;
  --bs-btn-padding-y: .2625rem;
  --bs-btn-font-size: .8rem
}

.btn.btn-md {
  --bs-btn-padding-x: 5rem;
  --bs-btn-padding-y: 1rem;
  --bs-btn-font-family: var(--bs-font-family);
  --bs-btn-font-size: 1.375rem;
  --bs-btn-font-weight: 500;
  --bs-btn-line-height: 1.5625rem;
  /* color: var(--bs-btn-color); */
  border-radius: 50px
}

.btn svg path {
  transition: all 300ms ease;
}

.btn-group.round-btn>.btn {
  border-radius: 57px !important
}

.btn.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: var(--bs-primary);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-active-shadow: inset 0 3px 5px #00000020;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary)
}



.btn.btn-primary-outline {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-active-shadow: inset 0 3px 5px #00000020;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: var(--bs-secondary);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-secondary);
  --bs-btn-active-border-color: var(--bs-secondary);
  --bs-btn-active-shadow: inset 0 3px 5px #00000020;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary)
}

.btn.btn-secondary.btnIcon:hover svg path {
  fill: var(--bs-secondary);
}

.btn.btn-black {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--black);
  --bs-btn-border-color: var(--black);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #424649;
  --bs-btn-hover-border-color: #373b3e;
  --bs-btn-focus-shadow-rgb: 66, 70, 73;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4d5154;
  --bs-btn-active-border-color: #373b3e;
  --bs-btn-active-shadow: inset 0 3px 5px #00000020;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--black);
  --bs-btn-disabled-border-color: var(--black)
}

.btn.btn-green {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-green);
  --bs-btn-border-color: var(--bs-green);
  --bs-btn-hover-color: var(--bs-green);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: var(--bs-green);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-green);
  --bs-btn-active-border-color: var(--bs-green);
  --bs-btn-active-shadow: inset 0 3px 5px #00000020;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-green);
  --bs-btn-disabled-border-color: var(--bs-green)
}

.btn.btn-skyblue {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--skyblue);
  --bs-btn-border-color: var(--skyblue);
  --bs-btn-hover-color: var(--skyblue);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: var(--skyblue);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--skyblue);
  --bs-btn-active-border-color: var(--skyblue);
  --bs-btn-active-shadow: inset 0 3px 5px #00000020;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--skyblue);
  --bs-btn-disabled-border-color: var(--skyblue)
}

.btn.btn-light-grey {
  --bs-btn-color: #000;
  --bs-btn-bg: #F9F9F9;
  --bs-btn-border-color: #F9F9F9;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: #F9F9F9;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #F9F9F9;
  --bs-btn-active-border-color: #F9F9F9;
  --bs-btn-active-shadow: inset 0 3px 5px #00000020;
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #F9F9F9;
  --bs-btn-disabled-border-color: #F9F9F9
}

.btn.btn-light-grey:hover svg path {
  fill: #ffffff;
}

.btn.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: var(--bs-secondary);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-secondary);
  --bs-btn-active-border-color: var(--bs-secondary);
  --bs-btn-active-shadow: inset 0 3px 5px #00000020;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary)
}

.btn.btn-dark:hover svg path {
  stroke: var(--bs-secondary);
}

.btn.btn-black {
  --bs-btn-color: #fff;
  --bs-btn-bg: #000;
  --bs-btn-border-color: #000;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #000;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #000;
  --bs-btn-active-border-color: #000;
  --bs-btn-active-shadow: inset 0 3px 5px #00000020;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #000;
  --bs-btn-disabled-border-color: #000
}

.btn.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-active-shadow: inset 0 3px 5px #00000020;
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-gradient: none
}

.btn.btn-outline-black {
  --bs-btn-color: #000;
  --bs-btn-border-color: #000;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #000;
  --bs-btn-hover-border-color: #000;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #000;
  --bs-btn-active-border-color: #000;
  --bs-btn-active-shadow: inset 0 3px 5px #d3c2c220;
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #000;
  --bs-gradient: none
}

.btn.btn-outline-danger {
  --bs-btn-color: #ff0000b2;
  --bs-btn-border-color: red;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #ff0000b2;
  --bs-btn-hover-border-color: #ff0000b2;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #ff0000b2;
  --bs-btn-active-border-color: #ff0000b2;
  --bs-btn-active-shadow: inset 0 3px 5px #00000020;
  --bs-btn-disabled-color: #ff0000b2;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #ff0000b2;
  --bs-gradient: none
}

.icon_btn {
  display: flex;
  align-items: center;
  gap: .25rem !important
}

.icon_btn.icon-1:hover svg path {
  fill: #fff;
  stroke: #fff
}

.icon_btn.btn-primary {
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff
}

.btn_lable {
  padding: .9375rem 1.3125rem;
  border: 2.07074px solid #FFF;
  border-radius: 31.0612px;
  color: #fff;
  width: fit-content;
  margin-inline: auto
}

.like-btn {
  font-size: 16px;
  line-height: 0
}

.like-btn.active svg .path0 {
  fill: var(--bs-primary);
  stroke: #fff
}

.like-btn.active svg .path1,
.like-btn.active svg .path2 {
  stroke: #fff
}

.submit_btn {
  --bs-btn-padding-x: 2.1875rem;
  --bs-btn-padding-y: 1.125rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-line-height: 1.1875rem;
  box-shadow: 0 2px 0 #413d4533
}

.filter-btn {
  --bs-btn-padding-x: 3.5rem;
  --bs-btn-padding-y: .8rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-line-height: 1rem
}

.sticky-top-100 {
  position: sticky;
  top: 100px
}

/* .bounce animation  */
.bounce-ani {
  animation: bounceFloat 2s ease-in-out infinite alternate;
  transform-origin: 50% 100%;
  will-change: transform
}

@keyframes bounceFloat {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(-10px)
  }
}

/* badge  */
.badge {
  --bs-badge-padding-x: 1.4875rem;
  --bs-badge-padding-y: .5625rem;
  --bs-badge-font-size: .9375rem;
  --bs-badge-font-weight: 600;
  --bs-badge-border-radius: 2.5781rem
}

.badge {
  --bs-badge-color: var(--bs-white);
  background-color: var(--skyblue-1)
}

.badge.badge-sm {
  line-height: 1
}

.badge.badge-small {
  --bs-badge-padding-x: .75rem;
  --bs-badge-padding-y: .475rem;
  --bs-badge-font-size: .875rem
}

.badge.badge-small2 {
  --bs-badge-padding-x: 1.1875rem;
  --bs-badge-padding-y: .4625rem;
  --bs-badge-font-size: .7375rem
}

.badge.thread-badge {
  --bs-badge-padding-x: .5rem;
  --bs-badge-padding-y: .375rem;
  --bs-badge-font-size: .75rem;
  --bs-badge-font-weight: 500;
  --bs-badge-border-radius: .3125rem
}

.badge.badge-main {
  --bs-badge-color: #05A2F5;
  background-color: #DBF1FE
}

.badge.badge-white {
  --bs-badge-color: #12244C;
  background-color: var(--bs-white)
}

.badge.badge-green {
  --bs-badge-color: #16A34A;
  background-color: #DCFCE7
}

.text-bg-update-subtle {
  --bs-badge-color: var(--bs-secondary);
  background-color: #DCFCE7
}

.text-bg-event-subtle {
  --bs-badge-color: #DCFCE7;
  background-color: var(--bs-primary)
}

.text-bg-release-subtle {
  --bs-badge-color: var(--bs-secondary);
  background-color: #DCFCE7
}

.xp-pill {
  background: #e8f7ee;
  color: #0f5132;
  border: 1px solid #bfe3cc
}

.badge-premium {
  background: var(--bs-primary);
  color: #fff;
  border: 1px solid var(--bs-primary)
}

/* .course card  */
/* .view_more{

  position: absolute;

  bottom: 0;

  left: 0;

  height: 100px;

  width: 100%;

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #FFFBF8 100%);

} */
/* .bg-purple{} */
.badge.community-badge {
  --bs-badge-padding-x: 1rem;
  --bs-badge-padding-y: .3625rem;
  --bs-badge-font-size: .8375rem;
  --bs-badge-font-weight: 600;
  --bs-badge-border-radius: 2.5781rem
}

.badge.risk {
  background-color: #ea2b2b33;
  color: #EA2B2B
}

.badge.bgn-badge {
  background-color: #16a34a33;
  color: #16A34A
}

.badge.basics {
  background-color: #0003;
  color: #000
}

.badge.math {
  background-color: #74bddd33;
  color: #74BDDD
}

.badge.pairs {
  background-color: #ff740033;
  color: #FF7400
}

.badge.psych {
  background-color: #6f42c133;
  color: #6f42c1
}

.px-flair {
  background: #fa6a2a14;
  color: var(--bs-primary);
  border: 1px solid #fa6a2a40
}

.badge-topic {
  background: #fa6a2a1f;
  color: var(--bs-primary);
  border: 1px solid #fa6a2a40
}

.required>label::after {
  content: " *";
  color: #dc3545
}

.db-list.list-group {
  --bs-list-group-item-padding-x: .5rem;
  --bs-list-group-bg: #fff;
  --bs-list-group-border-color: #dee2e6;
  --bs-list-group-color: #00000080
}

.list-group-item.active,
.list-group-item:focus {
  border-color: #dee2e6
}

.db-list.list-group .list-group-item {
  text-align: center;
  border-top: 0;
  border-bottom: 0
}

.db-list.list-group .list-group-item[aria-selected="true"] {
  background-color: var(--bs-primary-10)
}

.view_more {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100px;
  width: 100%;
  background: linear-gradient(180deg, #fffc 0%, #FFFBF8 100%);
  display: flex;
  justify-content: center;
  align-items: flex-end
}

.ui_list.collapsed {
  max-height: 450px;
  /* enough for ~5 lessons */
  overflow: hidden;
  position: relative;
  transition: max-height .5s ease
}

.ui_list.expanded {
  max-height: 2000px;
  /* big enough for all */
  transition: max-height .5s ease
}

.all-badge .badge-card {
  position: relative;
  background: var(--px-card);
  border: 1px solid var(--px-border);
  border-radius: var(--px-rad);
  box-shadow: var(--sh-sm);
  padding: var(--s16);
  text-align: center;
  transition: transform .15s ease, box-shadow .2s ease
}

.all-badge .badge-card:hover,
.badge-card:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--sh-lg)
}

a {
  transition: all var(--bs-transition) ease-in-out
}

a.card_link {
  color: #000;
  text-decoration: none
}

a.card_link:hover {
  color: var(--bs-primary)
}

.card.course_card {
  --bs-card-spacer-y: 1.5rem;
  --bs-card-spacer-x: 1.5rem;
  --bs-card-title-spacer-y: .5rem;
  --bs-card-border-width: 0;
  --bs-card-bg: #fff;
  --bs-card-title-spacer-y: .5rem;
  --bs-card-border-color: #00000024;
  border-radius: 1.125rem
}

.card.course_card:not(.card-smltr) .card-body {
  padding-right: 2.125rem;
  padding-bottom: 2.125rem
}

.course_card .card-header img {
  transform: scale(1);
  transition: all var(--bs-transition) ease-in-out
}

.course_card .card-header img:hover {
  transform: scale(1.1)
}

.meta_box {
  padding: 9px 21px;
  border-radius: 6px
}

/* card -2  */
.card.p_card-2 {
  --bs-card-spacer-y: 2rem;
  --bs-card-spacer-x: 2rem;
  --bs-card-border-radius: 1rem;
  --bs-card-border-width: 0
}

.card.banner_card {
  --bs-card-spacer-y: 2.15rem;
  --bs-card-spacer-x: 2.15rem;
  --bs-card-border-radius: 1.34rem;
  --bs-card-border-width: 0
}

/* site bar card  */
.card.site_card,
.card.auth-card {
  --bs-card-spacer-y: 1.875rem;
  --bs-card-spacer-x: 1.5rem;
  --bs-card-border-radius: 1.34rem;
  --bs-card-border-width: 0;
  color: #fff;
  /* background-image: url('../media/site_card_bg.webp'); */
  background-repeat: no-repeat;
  background-size: cover
}

.syllabus-siteBar .card.site_card {
  background-image: url(../media/site_card_bg.webp)
}

.card.auth-card {
  --bs-card-spacer-y: 1rem;
  --bs-card-spacer-x: 1.2rem;
  --bs-card-border-radius: 1.34rem;
  --bs-card-border-width: 0
}

/* table card  */
.card.table-card {
  --bs-card-cap-padding-y: .5rem;
  --bs-card-cap-padding-x: .5rem;
  --bs-card-cap-bg: var(--bs-primary-10)
}

.card.card-px {
  --bs-card-spacer-y: 1.5625rem;
  --bs-card-spacer-x: 1.875rem;
  --bs-card-border-radius: 1.34rem
}

article.card.scenario-card.h-100 {
  min-height: 200px
}

table.threads>:not(caption)>*>* {
  padding: 1rem !important;
  color: var(--bs-secondary)
}

table.threads th {
  font-size: 18px;
  color: var(--bs-secondary)
}

/******* ALL TABLE *********/
.table-sm.table-main>:not(caption)>*>* {
  padding: .25rem 1rem
}

.table-primary {
  --bs-table-color: #000;
  --bs-table-bg: var(--bs-primary-10);
  --bs-table-border-color: var(--bs-primary);
  --bs-table-striped-bg: var(--bs-primary);
  --bs-table-striped-color: #fff;
  --bs-table-active-bg: var(--bs-primary);
  --bs-table-active-color: var(--bs-primary);
  --bs-table-hover-bg: var(--bs-primary);
  --bs-table-hover-color: #fff;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color)
}

.form-check-input.primary-toggle:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary)
}

.form-check-input.primary-toggle.desable:checked {
  background-color: var(--bs-primary)
}

.form-check-input.primary-toggle:not(.desable):focus {
  outline: 0;
  box-shadow: var(--bs-primary);
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")
}

.form-check-input:checked {
  background-color: #00000080;
  border-color: #0000
}

.form-check-input:focus {
  box-shadow: none
}

#orderForm .form-label {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: .3rem
}

.table.smltr-table thead th {
  background-color: var(--bs-primary-10)
}

.table-sm.smltr-table>:not(caption)>*>* {
  padding: .25rem .65rem
}

.history_table {
  min-width: 800px
}

/******* ALL TABLE END  *********/
/******* ALL PAGINATION START  *********/
.pagination.pagination-primary {
  --bs-pagination-color: #000;
  --bs-pagination-font-size: 1rem;
  --bs-pagination-hover-color: var(--bs-primary);
  --bs-pagination-hover-bg: var(--bs-tertiary-bg);
  --bs-pagination-hover-border-color: var(--bs-border-color);
  --bs-pagination-focus-color: var(--bs-primary);
  --bs-pagination-focus-box-shadow: 0;
  --bs-pagination-active-color: var(--bs-primary);
  --bs-pagination-active-bg: #fff;
  --bs-pagination-active-border-color: var(--bs-border-color)
}

/******* ALL PAGINATION END  *********/
/* annoucment  */
.ann-card.read {
  background: var(--bs-primary-10)
}

/* annoucment  */

.tool-box svg>* {
  transition: all 300ms ease;
}

.tool-box:hover svg rect {
  fill: var(--bs-primary);
}

.tool-box:hover svg path {
  fill: #ffffff;
}

/* list type  */
.try-challenges .custom-list li {
  margin-bottom: 2.375rem
}

.custom-list li {
  list-style: none;
  position: relative;
  padding-left: 47px
}

.custom-list.sm-circle li {
  padding-left: 30px
}

.custom-list li::before {
  content: '';
  position: absolute;
  width: 34px;
  height: 34px;
  left: 0;
  top: 0;
  background-image: url(../media/icon/round-check.svg);
  background-size: cover
}

.custom-list.sm-circle li::before {
  width: 20px;
  height: 20px;
  top: 2px
}

.timing_list li {
  padding-left: 0
}

.timing_list li::before {
  background-image: none
}

.timing_list li:not(:first-child)::before {
  content: '.';
  background-image: none;
  left: -9px;
  font-size: 26px;
  top: auto;
  bottom: 12px;
  display: inline
}

.bg-shade {
  position: relative;
  overflow: hidden
}

.bg-shade::before {
  content: '';
  position: absolute
}

/* breadcrum  */
.breadcrumb ol {
  list-style: none;
  padding: 0;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap
}

/* .breadcrumb li::after{content:'›';margin:0 0.5rem;} */
.breadcrumb li:last-child::after {
  content: ''
}

.breadcrumb a {
  color: var(--bs-primary);
  text-decoration: none
}

.breadcrumb-item+.breadcrumb-item {
  position: relative;
  padding-left: 18px
}

.breadcrumb-item+.breadcrumb-item::before {
  content: '';
  background-image: url(../media/right-angle.svg);
  width: 14px;
  height: 14px;
  background-position: center;
  position: absolute;
  bottom: 6px;
  left: 2px
}

/* gamifiacation  */
.streak_box {
  display: inline-flex;
  align-items: center;
  padding: .4375rem .7rem;
  border-radius: 10px;
  background-color: #fff;
  white-space: nowrap;
  max-width: fit-content
}

.streak_box.no-bg {
  background: transparent;
  padding: 0;
  border-radius: 0;
  white-space: nowrap
}

/* progress  */
.progress,
.progress-stacked {
  --bs-progress-height: 1rem;
  --bs-progress-font-size: .75rem;
  --bs-progress-bg: var(--bs-green-60);
  --bs-progress-border-radius: .5rem;
  --bs-progress-box-shadow: var(--bs-box-shadow-inset);
  --bs-progress-bar-color: #fff;
  --bs-progress-bar-bg: var(--bs-green)
}

.progress-bar {
  border-radius: var(--bs-progress-border-radius)
}

.min-150 {
  min-width: 150px
}

.progress.progress-1 {
  --bs-progress-height: .8rem;
  --bs-progress-font-size: .75rem;
  --bs-progress-bg: rgba(82, 184, 219, 0.1);
  --bs-progress-border-radius: .5rem;
  --bs-progress-box-shadow: var(--bs-box-shadow-inset);
  --bs-progress-bar-color: #fff;
  --bs-progress-bar-bg: var(--skyblue-900);
  min-width: 225px
}

.progress.progress-muted {
  --bs-progress-height: .563rem;
  --bs-progress-font-size: .75rem;
  --bs-progress-bg: #D6D9E1;
  --bs-progress-border-radius: .5rem;
  --bs-progress-box-shadow: var(--bs-box-shadow-inset);
  --bs-progress-bar-color: #fff;
  --bs-progress-bar-bg: #eee;
  min-width: 225px
}

.progress.progress-muted .progress-bar {
  background: linear-gradient(90deg, #B6B8BC 0%, #91949B 100%)
}

.v-divider {
  position: absolute;
  width: 2px;
  height: 100%;
  background-color: #D9D9D9;
  left: 33%
}

/* muted/disabled look for free users */
.gamify-muted {
  opacity: .55;
  filter: grayscale(20%);
  pointer-events: none;
  user-select: none
}

/* .course-muted { } */
/* course list  */
/* Minimal, Bootstrap-first overrides */
.resume-inline {
  padding: .35rem .6rem;
  font-size: .75rem
}

.border-dashed {
  border-style: dashed !important
}

.cl-list .card-body {
  padding: 1.4375rem 1.25rem
}

/* Sticky progress card spacing under header */
.sticky-76 {
  top: 76px
}

/* Muted/disabled state for free/guest progress cards */
/* .gamify-muted{ opacity:.9; } */
/* Optional: compact list items */
ul.list-compact {
  padding: 1.25rem 1.25rem 2.875rem 2.0625rem
}

.list-compact .list-group-item {
  padding: 0 0 1.563rem 1.5rem;
  border-bottom: 0;
  border-left: 2px solid #0000001A;
  border-radius: 0
}

.list-compact .list-group-item.complete a {
  color: #74BDDD
}

.list-compact .list-group-item a:not(.btn) {
  color: #444951
}

.list-compact .list-group-item:last-child {
  border-color: transparent
}

/* end course  */
.courseRowsWrap .list-compact .list-group-item,
.left-border-tab li {
  padding: .5rem 0 2.5rem 2.5rem;
  border-left: 4px solid #E6E6E6
}

.custom-list.list-compact li::before {
  content: '';
  position: absolute;
  width: 3rem;
  height: 3rem;
  /* left:-1.875rem; */
  left: -1.625rem;
  top: -5px;
  border: 0;
  border-radius: 50rem;
  z-index: 2;
  background-color: var(--skyblue-900);
  background-image: url(../media/pix_play.svg);
  background-size: 2.5rem;
  background-position: center;
  background-repeat: no-repeat;
  transition: .2s ease-in-out all
}

.custom-list.list-compact li.complete::before {
  background-image: url(../media/pix_check.svg)
}

.courseRowsWrap .list-compact .list-group-item.complete {
  border-left: 4px solid var(--skyblue-1)
}

.courseRowsWrap .list-compact .list-group-item.current-lesson a:not(.btn) {
  color: #74BDDD
}

/* .custom-list.list-compact li.locked-lesson::before{filter:grayscale(1);} */
.custom-list.list-compact li::after {
  content: '';
  position: absolute;
  width: 3rem;
  height: 3rem;
  /* left: -1.875rem; */
  left: -1.625rem;
  top: 0;
  border-radius: 50rem;
  background-color: #2B6173;
  z-index: 0;
  transition: .2s ease-in-out all
}

.custom-list.list-compact li:active::before {
  top: 0
}

.courseRowsWrap .list-compact .list-group-item,
.left-border-tab li {
  /*padding:0.5rem 0 3rem 3.25rem;*/
  padding: .125rem 0 3.25rem 3.25rem
}

.courseRowsWrap .list-compact .list-group-item:last-child,
.left-border-tab li:last-child {
  border-left: 4px solid transparent
}

/*  */
.custom-list.list-compact li.locked-lesson::before {
  background-image: url(../media/pix_lock.svg);
  background-size: 3rem;
  background-color: #E4E4E4
}

.custom-list.list-compact li.locked-lesson::after {
  background-color: #BFBFBF
}

.courseRowsWrap .list-compact .list-group-item.current-lesson:hover .btn.btn-outline-primary,
#syllabus li.current:hover .btn.btn-outline-primary {
  --bs-btn-color: #fff;
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-bg: var(--bs-primary)
}

.custom-list.list-compact li:active::before {
  border-width: 0
}

.custom-list.list-compact li .stretched-link::after {
  z-index: 10
}

#courseRows .cp_card .card-body {
  margin-top: -.5rem
}

.text-3F2314 {
  color: #3F2314 !important
}

.text-444951 {
  color: #444951 !important
}

.cl-list .card-body {
  padding: 2rem 1.25rem;
  margin-bottom: 1rem
}

.hero-card {
  background: url(../media/ad_hero_card_bg.webp) center / cover no-repeat;
  border-radius: 1rem;
  min-width: 14rem;
  margin-bottom: 2.1875rem
}



/* .custom-list.list-compact li:before{background-image: url('../media/l-list.svg'); top: 0px; left: -14px; width: 26px; height: 26px;}

.custom-list.list-compact li.complete:before{background-image: url('../media/ls-list.svg');} */
/* video player  */
.video-wrapper {
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  border-radius: .75rem;
  overflow: hidden;
  box-shadow: 0 8px 24px #00000029;
  background: #000
}

.play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0006;
  cursor: pointer
}

.play-overlay.hidden {
  display: none
}

.seek {
  flex-grow: 1
}

.volume {
  width: 100px;
  display: none
}

.volume.show {
  display: inline-block
}

/* new  */
/* ui tabs  */
.ui-tab-btn {
  border: 0;
  border-bottom: 1px solid #000;
  padding-bottom: .625rem !important
}

.ui-tab-btn[aria-selected="true"] {
  font-weight: 600 !important;
  color: #000
}

.ui-tab-btn[aria-selected="false"] {
  font-weight: 500 !important;
  color: #2D2C2B;
  border-color: transparent
}

/* new  */
.ui-tabs {
  --bs-nav-link-color: #2D2C2B;
  --bs-nav-link-hover-color: #000;
  --bs-nav-tabs-link-active-color: #000;
  --bs-nav-tabs-border-width: 1px;
  /* default 1px hota hai */
  --bs-nav-tabs-border-color: transparent;
  border-bottom: 1px solid #D9D9D9;
  --bs-nav-link-padding-x: 0;
  --bs-nav-link-font-weight: 500;
  --bs-nav-link-active-font-weight: 600;
  column-gap: 2.25rem
}

.ui-tabs .nav-link {
  border: none;
  /* sab border hatado */
  border-bottom: var(--bs-nav-tabs-border-width) solid transparent;
  color: var(--bs-nav-link-color);
  background: transparent
}

.ui-tabs .nav-link.active {
  border-bottom-color: var(--bs-nav-tabs-link-active-color);
  color: var(--bs-nav-tabs-link-active-color);
  font-weight: var(--bs-nav-link-active-font-weight)
}

.ui-tabs .nav-link:hover {
  border-bottom-color: var(--bs-nav-link-hover-color);
  color: var(--bs-nav-link-hover-color)
}

.ui-tabs#db-dabs {
  --bs-nav-link-padding-x: 1rem;
  column-gap: .2rem;
  --bs-nav-tabs-link-active-color: var(--bs-primary);
  --bs-nav-link-hover-color: var(--bs-primary)
}

/* community tabs  */
/* .filter-primary{border-bottom: 1px solid #D9D9D9;} */
/* .filter-primary .c-link{

  padding: .5rem 1rem;

  border: 0;

  border-bottom: 1px solid transparent;

  background-color: transparent;

  transition: all var(--bs-transition) ease-in-out;

} */
/* .filter-primary .c-link.active{border-color: var(--bs-primary); color: var(--bs-primary); font-weight: 600 !important;} */
.filter-primary .c-link {
  border: 1px solid #D9D9D9;
  padding: .4375rem .9375rem;
  border-radius: .4375rem;
  background-color: transparent
}

.filter-primary .c-link.active {
  background-color: #E8EAED
}

.bg-light-blue {
  background-color: #F1F8FC
}

.sky-blue-blend {
  position: relative
}

.sky-blue-blend:before {
  content: '';
  background-color: #74BDDD;
  mix-blend-mode: hue;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1
}

/* #syllabus */
/*
#syllabus li .syllabus-btn{display: none;}

#syllabus li.current a.lessonTitle{color: var(--skyblue-900);}

#syllabus li a.lessonTitle{color: #444951;display: flex;gap: 12px;align-items: center;}

#syllabus li a:hover{color: var(--bs-primary);}

#syllabus li:first-child{border-radius: 0px;}
#syllabus li:last-child{border-color: transparent;}

#syllabus li {padding: .5rem 0  2.5rem  3rem;color: #444951;font-size:clamp(18px, 2vw, 22px);font-weight: 500;border-radius: 0;}

#syllabus li.lock{pointer-events: none;}
#syllabus .syllabus-btn{display: none !important;}

#syllabus li.complate:not(.current) .play-btn {display: inline-block;}

#syllabus li.current .current-btn {position: absolute;
    right: 0;
    padding: 5px 15px;
    font-size: 18.76px;
    line-height: 27.01px;
    border: 1.25px solid #FF7400;
    border-radius: 71.27px;
    top: -4px;
    color: #FF7400;
    font-weight: 600;
  display: block !important;
  }

#syllabus li.lock .lock-btn{display: inline-block;}

#syllabus li.lock{pointer-events: none;}

#syllabus li.current{ color: var(--skyblue-900);}
#syllabus li:hover{    background: transparent;
    transform: translateX(0px);}

.custom-list.list-compact#syllabus li::before{left: -1.875rem;}
.custom-list.list-compact#syllabus li:before{background-image: url('../media/pix_lock.svg');}
.custom-list.list-compact#syllabus li.complate::before{background-image: url('../media/pix_check.svg');}
.custom-list.list-compact#syllabus li.current::before{background-image: url('../media/pix_play_w.svg');}*/
/* @media(max-width:967px){.syllabus-btn.current-btn{display: none !important;}} */
/* Syllabus list */
/*
.list-clean{list-style:none; padding-left:0; margin-bottom:0}

.list-clean li{display:flex; align-items:center; gap:.5rem; padding:.6rem .5rem; border-radius:.65rem; transition: background .2s var(--ui-ease), transform .2s var(--ui-ease)}

.list-clean li:hover{background:var(--bs-F8F9FA); transform: translateX(2px)}

.list-clean li .icon{width:1rem; height:1rem}

.list-clean li .lock{color:#adb5bd}*/
/* pages start  */
.main-banner.home .slider_row {
  padding: 123px 0 190px
}

.main-banner.inner {
  padding: 4rem 0
}

.main-banner.inner-page {
  padding: 5rem 0;
  background-image: url(../media/banner/smtr_bg.webp)
}

.main-banner.smltr.history {
  padding: 8rem 0;
  background-image: url(../media/banner/smtr_bg.webp)
}

/* course list  */
#course_list.main-banner .img_wrapper img {
  right: 121px;
  height: 100%
}


#home-hero .lix_main {
  top: 17%;
  right: -3%
}

.piller .iconbox {
  border-color: #D0D0D0
}

#home-hero .banner_icon {
  z-index: -1
}

.candle_slide_bg {
  overflow: hidden
}

.candle_slide_bg:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 25%;
  transform: translateX(-50%);
  width: 160vw;
  height: 460px;
  background-repeat: repeat-x;
  background-size: auto 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
  background-image: url(../media/bg-candle.webp);
  animation: candlesSlide 90s linear infinite;
  pointer-events: none
}

@keyframes candlesSlide {
  0% {
    background-position-x: 0
  }

  100% {
    background-position-x: 2000px
  }
}

/* ===== HOW IT WORKS ===== */
.hiw-rail {
  position: absolute;
  right: 18%;
  width: 65%;
  top: clamp(30px, 16vw, 277px);
  height: 2px;
  pointer-events: none;
  background-image: radial-gradient(circle at 0 52%, var(--bs-rail-dot) 7.6px, transparent 5.6px);
  background-size: 14px 2px;
  background-repeat: repeat-x;
  animation: hiw-dots 2.2s linear infinite;
  z-index: -1
}

@keyframes hiw-dots {
  to {
    background-position-x: 14px
  }
}

.benifit-card {
  background-repeat: no-repeat;
  min-height: 380px
}

.card.bf_4 .card-img img {
  right: 0;
  top: -15px
}

.benifit-card.left_img .card-img img,
.benifit-card.bottom-img .card-img img {
  position: absolute;
  right: 0;
  top: 0
}

.benifit-card.bottom-img .card-img img {
  bottom: -36%;
  top: auto;
  left: 6%
}

.card.bf_1 .card-img img {
  right: -80px
}

.card.bf_4 .card-img img {
  top: -10px !important
}

.card-shade {
  position: relative;
  overflow: hidden
}

.card-shade:after {
  content: '';
  background-color: #ff7400cc;
  filter: blur(100px);
  position: absolute;
  right: 0;
  width: 100%;
  height: 100%
}

.card.bf_4.card-shade:after {
  width: 50%;
  z-index: 0
}

/* testimonail  */
.client {
  background-image: url(../media/client_bg.webp)
}

.testislider {
  height: 520px;
  max-width: 415px;
  margin-left: 0
}

.test-seciotn {
  position: relative;
  min-height: 600px
}

/* .testislider .swiper-slide{color: #fff; min-height: 158px;} */
.testislider .swiper-slide {
  overflow: hidden;
  border-radius: 18px
}

/* card  */
.card.testi_card {
  --bs-card-spacer-y: 1.25rem;
  --bs-card-spacer-x: 1rem;
  --bs-card-border-radius: 1.125rem;
  background: #ffffffd9;
  opacity: .2;
  height: 100%
}

.card.testi_card .card-body {
  padding-right: 2rem;
  display: flex;
  gap: 1.6875rem
}

.testislider .swiper-slide-active {
  box-shadow: 8px 8px 10px #ffffff40
}

.testislider .swiper-slide-active .card.testi_card {
  background-color: #fff;
  opacity: 1;
  box-shadow: 8px 8px 36px #ffffff40
}

.card.testi_card .card-icon {
  margin-top: 20px
}

.client.bg-shade::before {
  background: #000;
  filter: blur(167px);
  width: 1002px;
  height: 1002px;
  left: 167px;
  top: -264px
}

.card.rec-card {
  --bs-card-spacer-y: 1.25rem;
  --bs-card-spacer-x: 1.25rem;
  --bs-card-title-color: #D9D9D9
}

/* ads card  */
.card.ad-card {
  background: linear-gradient(180deg, #ffffff05, #ffffff03);
  border: 1px dashed #e6e8ec
}

/* cta  */
.main_cta .cta-card {
  background-image: url(../media/cta_bg.webp);
  padding-block: 120px;
}

.user_thumb {
  position: absolute;
}

.user_thumb.thumb1 {
  top: 4.25rem;
  left: 14rem;
  width: 73px;
}

.user_thumb.thumb2 {
  top: 6rem;
  right: 9rem;
  width: 93px;
}

.user_thumb.thumb3 {
  bottom: 10rem;
  left: 10rem;
  width: 92px;
}

.user_thumb.thumb4 {
  bottom: 13rem;
  right: 13rem;
  width: 67px;
}

.main_cta .col.cta-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center
}

/* footer  */
/* news latter  */
#threadForm .form-control-lg {
  border: 1px solid #dee2e6;
  outline: none
}

.btn-check+.btn:hover {
  border-color: var(--bs-secondary)
}

.form-control:focus,
#threadForm .form-control-lg:focus {
  box-shadow: none;
  border-color: var(--bs-primary)
}

.newslatter.form-control {
  padding: 1rem;
  font-size: .9375rem;
  font-weight: 400;
  border-radius: .5rem;
  border: 1px solid #D2D5DE;
  color: #63605D;
  line-height: 0
}

/* footer link columns */
.site-footer .footer-link {
  font-size: 14px;
  color: #ffffff91;
  transition: color var(--bs-transition) ease-in-out;
}

.site-footer .footer-link:hover {
  color: var(--bs-primary);
}

/* footer collapse +/- icon (mobile only, hidden on lg via d-lg-none) */
.footer-collapse-icon::after {
  content: '+';
  font-size: 18px;
  color: rgba(255, 255, 255, .45);
  line-height: 1;
}

.footer-heading:not(.collapsed) .footer-collapse-icon::after {
  content: '\2212';
}

/* desktop: disable heading click */
@media (min-width: 992px) {
  .site-footer .footer-heading {
    pointer-events: none;
    cursor: default;
  }
}

/* Filter selects - consistent width and spacing */
.search_field input {
  border-radius: 6px 0 0 6px;
  font-size: 1.25rem;
  padding: 1.125rem;
  line-height: 0
}

.search_field .btn {
  border-radius: 0 6px 6px 0
}

.form-select.r-filter,
.r-filter {
  padding: .8rem 1rem;
  font-size: 1rem;
  border-radius: 3.5725rem;
  background-position: right 2rem center;
  line-height: 1
}

/* #clear-filters{padding: 1rem 1.38rem;line-height: 0;font-size: 20px;} */
/* lesson  */
.card.auther {
  --bs-card-border-radius: 18px
}

.card.side-bar-card {
  --bs-card-cap-padding-y: 1.125rem;
  --bs-card-cap-padding-x: 1.5625rem;
  --bs-card-inner-border-radius: 18px;
  --bs-card-border-radius: var(--bs-card-inner-border-radius);
  /* --bs-card-border-width:0; */
  --bs-card-cap-bg: transparent
}

.scenario-card[data-premium="true"] {
  background-color: var(--bs-primary-10)
}

/* sitebar  */
.card.syllabus-card {
  --bs-card-cap-padding-y: 1.125rem;
  --bs-card-cap-padding-x: 1.25rem;
  --bs-card-spacer-y: 1.125rem;
  --bs-card-spacer-x: 1.25rem;
  --bs-card-cap-bg: transparent;
  --bs-card-border-width: 0;
  --bs-card-border-radius: var(--bs-card-inner-border-radius);
  border-radius: 20px
}

.card.card-hover {
  border: 1px solid transparent;
  transition: all var(--bs-transition) ease-in-out
}

.card.card-hover:hover {
  border-color: var(--bs-primary);
  box-shadow: var(--bs-box-shadow-sm) !important
}

.card.card-smltr {
  --bs-card-spacer-y: 1.5rem;
  --bs-card-spacer-x: 1.5rem;
  --bs-card-cap-padding-x: 1.5rem;
  --bs-card-cap-padding-y: 1rem;
  --bs-card-cap-bg: var(--bs-bg-one)
}

.card.card-smltr .card-header {
  padding-bottom: 0;
  border-radius: 20px
}

.card.syllabus-card .card-body {
  padding-bottom: 0
}

.card.syllabus-card .card-header {
  position: relative
}

.card.syllabus-card .card-header::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 4%;
  width: 93%;
  height: 1px;
  background-color: #D9D9D9
}

.underline-offset-5 {
  text-underline-offset: 5px
}

.ls-6 {
  letter-spacing: .06em
}

.custome_list.lesson_list li {
  padding: 10px 17px;
  border-bottom: 1px solid #0000001A
}

.custome_list.lesson_list li:last-child {
  border: none
}

.custome_list.lesson_list li.active {
  background-color: #74BDDD1A;
  font-weight: 600;
  border-color: #74BDDD
}

.custome_list.lesson_list li.active a {
  color: #74BDDD
}

.custome_list.lesson_list li a {
  text-decoration: none;
  color: #000C;
  margin-left: 8px;
  line-height: 1.6
}

.custome_list.lesson_list li.active svg path {
  fill: #74BDDD
}

.timing_box {
  padding: 0 10px;
  border-radius: 5.6px
}

.auth-h-cta {
  background-image: url(../media/w_bg.webp);
  padding: 35px 0
}

/* dashboard  */
.navbar-nav.db-nav {
  --bs-nav-link-color: #000;
  --bs-nav-link-font-size: 1rem;
  margin-top: 1.125rem;
  column-gap: 2.0625rem;
  flex-wrap: wrap;
  flex-direction: row;
  text-transform: capitalize;
  font-weight: 500
}

.navbar-nav.ptopics {
  --bs-nav-link-font-size: .835rem;
  --bs-nav-link-padding-y: .3rem
}

.soft-upsell {
  background: linear-gradient(90deg, #fa6a2a1f, #00b3c71f);
  border: 1px dashed #fa6a2a59;
  border-radius: 16px;
  padding: 1rem
}

.db-panle .row.g-4 {
  --bs-gutter-x: 3.75rem;
  --bs-gutter-y: 1.875rem
}

.db-pages footer {
  display: none
}

.db-nav1.navbar-nav {
  --bs-nav-link-padding-x: .9375rem;
  --bs-nav-link-padding-y: .69rem
}

.db-nav1.navbar-nav .nav-item {
  width: 100%
}

.db-nav.navbar-nav .nav-link {
  border-radius: 8px 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px
}

/* wlcm msg  */
.wlcm-msg {
  background-image: url(../media/wlcm-bg.webp)
}

#dash-nav a[aria-current="page"],
#dash-nav a:hover {
  background-color: #F6F7F9;
  color: #000
}

#dash-nav ul li a:hover svg path,
#dash-nav a[aria-current="page"] svg path {
  fill: #000;
  fill-opacity: 1
}

.card.sub-card {
  --bs-card-cap-padding-y: .8125rem;
  --bs-card-border-color: #D9D9D9;
  --bs-card-border-radius: .5rem
}

/* badge  */
/* minimal, Bootstrap does most of the work */
.badge-locked .badge-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: blur(6px)
}

.badge-locked .lock-icon {
  font-size: 1.1rem;
  opacity: .75
}

.badge-locked .card-body {
  align-content: center;
  position: relative
}

.badge-unlock .badge-card {
  background-color: transparent
}

.badge-unlock {
  background-color: var(--bs-F8F9FA)
}

.card.lix-card {
  --bs-card-spacer-y: 1.25rem;
  --bs-card-spacer-x: 1.25rem;
  --bs-card-border-radius: 1.125rem;
  --bs-card-border-color: #0000001A;
  background-image: url(../media/lix-bg.webp);
  background-repeat: no-repeat;
  background-position: right;
  background-size: cover;
  min-height: 190px
}

.lix-card.europ {
  background-image: url(../media/europ-flag.webp)
}

.card.lix-card.lix_card-2 {
  --bs-card-spacer-y: 1.25rem;
  --bs-card-spacer-x: 1.25rem;
  --bs-card-border-radius: 1.125rem;
  background-image: none;
  min-height: auto
}

.faster_list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .75rem
}

.all-badge .b-space {
  --20-gap: 20px;
  gap: var(--20-gap);
  flex-wrap: wrap
}

.all-badge ul li {
  width: calc(100% / 3 - var(--20-gap)) !important;
  flex: none;
  border-radius: 20px
}

/* end  */
.all-badge ul li .badge-card {
  padding: 0
}

.all-badge ul li .badge-card .fs-10 {
  font-size: 1.2rem;
  margin-top: 10px
}

.lix_card-2 .btn {
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: .5625rem;
  --bs-btn-font-size: .9rem
}

/* USA Code Here */
.ls {
  letter-spacing: var(--letter-spacing, normal)
}

/* blog Listing Page */
.text-2D2C2B {
  color: #2D2C2B !important
}

.__blogWrapper {
  padding-block: 2rem
}

.__blogWrapper .__header {
  padding-top: 25px;
  padding-bottom: 37px;
  border-bottom: 1px solid #d2d2d257;
  margin-bottom: 2rem
}

.heading-wrp .__title {
  line-height: 1
}

.heading-wrp .__subtitle {
  font-weight: 400;
  font-size: clamp(18px, 2vw, 26px);
  line-height: clamp(24px, 2vw, 37px);
  color: #2D2C2B
}

.__blogWrapper .form-select {
  font-weight: 500;
  font-size: 16px;
  line-height: 36px;
  color: #000;
  border: 0;
  min-width: 90px;
  max-width: 150px;
  height: 36px;
  background-color: #F6F7F9;
  padding: 0 1.5rem 0 .875rem;
  cursor: pointer
}

.__blogWrapper .form-select option {
  background-color: #F6F7F9;
  border: 0
}

.__blogWrapper .form-select:where(#topic) {
  width: 150px
}

.__header .search-wrapper .dropdown .btn.search_icon {
  width: 57px;
  height: 57px;
  background: #F6F7F9;
  border-radius: 57px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 1px
}

/*
{}
  .__blogWrapper .form-select
 */


.ads__wrp {
  --bs-card-spacer-y: 1.75rem;
  --bs-card-spacer-x: .5rem;
  --bs-card-title-spacer-y: 1.5rem;
  --bs-card-title-color: #1D1E1C;
  --bs-card-subtitle-color: #00000080;
  --bs-card-border-width: 0;
  --bs-card-border-radius: 1rem;
  /* --bs-card-height: ; */
  --bs-card-color: #444951;
  --bs-card-bg: #d9d9d91f;
  transition: background .2s ease-in-out
}

.card.post-card {
  --bs-card-spacer-y: 1.75rem;
  --bs-card-spacer-x: .5rem;
  --bs-card-title-spacer-y: 1.5rem;
  --bs-card-title-color: #1D1E1C;
  --bs-card-subtitle-color: #00000080;
  --bs-card-border-width: 0;
  --bs-card-border-radius: 1rem;
  /* --bs-card-height: ; */
  --bs-card-color: #444951;
  --bs-card-bg: #d9d9d91f;
  transition: background .2s ease-in-out
}

.card.post-card.big {
  --bs-card-spacer-y: 3.625rem;
  --bs-card-spacer-x: 1.5rem;
  --bs-card-title-spacer-y: 1.5rem
}

.__recentArticles .card.post-card {
  --bs-card-spacer-y: 1.5rem;
  --bs-card-spacer-x: 1.5rem;
  --bs-card-title-spacer-y: 0
}

.card.post-card .card-title {
  line-height: 1
}

.card.post-card .card-text {
  line-height: 26px
}

.card.post-card.big .card-title {
  max-height: 68px;
  overflow: hidden
}

.card.post-card:not(.big) .card-body .__wrap {
  display: flex;
  align-items: center;
  gap: 13px
}

.card.post-card ._media {
  background-color: #fff;
  height: 100%;
  width: 100%;
  min-width: 131px
}

.card.post-card ._media img {
  border-radius: 20px
}

.card.post-card.big ._media {
  max-height: 259px;
  min-width: auto;
  min-height: 258px
}

.card.post-card:not(.big) ._media {
  width: 131px;
  min-height: 87px;
  height: 87px;
  flex-shrink: 0
}

.card.post-card:not(.big) .card-title {
  line-height: 1.375
}

.js-blog-list li:not(:last-child) {
  margin-bottom: .75rem
}

.__blogWrapper .cat-chip,
.blog__detail__content .cat-chip {
  max-height: 25px;
  background: #fa5d0014;
  border-radius: 8px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* padding-inline: .75rem; */
  padding-inline: 1.1115rem;
  padding-block: .25rem;
}

.blog_detail_meta .badge-topic.cat-chip {
  font-size: 86%;
  line-height: 1;
  padding: 6px 15.2px;
}

.__blogWrapper .__cta.withAds {
  padding-block: 3rem
}

.__cta .card {
  --bs-card-spacer-y: 2.75rem;
  --bs-card-spacer-x: 3.125rem;
  --bs-card-title-spacer-y: .125rem;
  --bs-card-title-color: #1D1E1C;
  --bs-card-subtitle-color: #000000a6;
  --bs-card-border-width: 0;
  --bs-card-border-radius: 1.25rem;
  /* --bs-card-height: ; */
  --bs-card-color: var(--bs-card-subtitle-color);
  --bs-card-bg: #52b8db14
}

.__cta .card .card-title {
  line-height: 30px
}

.__cta .card .card-text {
  line-height: 27px
}

.__recentArticles .heading-wrp {
  margin-bottom: 1.5rem
}

.__recentArticles .card.post-card ._media {
  min-height: 180px
}

/*  */
.blog_level_cta {
  padding: var(--py, 20px) var(--px, 50px);
  background-image: none !important;
  background-size: cover;
  background-position: left top
}

.blog_level_cta .fs-34 {
  font-size: clamp(20px, 2vw, 24px)
}

.blog_level_cta .fs-18 {
  font-size: clamp(15px, 2vw, 18px)
}

.btn-link {
  text-decoration: none;
  font-weight: 600;
  display: flex;
  gap: 8px;
  align-items: center;
  transition: all 300ms ease
}

.btn-link svg {
  transition: all 300ms ease
}

.btn-link:hover svg {
  margin-left: 2px
}

.btn-link-primary {
  color: #FA5D00
}

.btn-link-primary:hover {
  color: #FA5D00;
  opacity: .8
}

.blog__list__card .img__wrp {
  max-height: 165px
}

.blog__list__card .img__wrp img {
  height: 100%
}

.page-number {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  background: #f0f0f0;
  font-size: clamp(15px, 2vw, 17px);
  color: #000;
  cursor: pointer;
  transition: all .3s ease
}

.page-number a {
  color: #000
}

.page-number.active {
  background: #f60;
  /* Orange */
  color: #fff
}

.page-arrow {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 2px solid #00000026;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .3s ease;
  position: absolute
}

.page-arrow-prev {
  left: 0
}

.page-arrow-next {
  right: 0
}

.page-arrow:hover {
  background: #f60;
  color: #fff;
  border-color: #f60
}

.page-arrow:hover svg path {
  fill: #fff
}

.border-black-10 {
  border-color: #0003 !important
}

.custom-search.search-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: #fff;
  height: 40px;
  border-radius: 40px !important;
  padding: 6px 48px 6px 12px;
  transition: background .25s;
  overflow: visible
}

.custom-search .form-control {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 16px;
  line-height: 1;
  width: 0;
  max-width: 0;
  padding: 0;
  margin: 0;
  transition: width .35s ease, max-width .35s ease, padding .25s ease;
  flex: 0 0 auto;
  box-sizing: border-box
}

.custom-search .btn-search {
  position: absolute;
  right: 8px;
  width: 40px;
  height: 40px;
  border-radius: 50% !important;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none !important;
  transition: background .25s, color .25s;
  z-index: 2;
  color: #4097FF
}

.custom-search:hover .form-control,
.custom-search.open .form-control,
.custom-search .form-control:focus {
  width: 240px !important;
  max-width: 240px !important;
  padding-left: 8px
}

.custom-search:hover .btn-search,
.custom-search.open .btn-search {
  background: #fff;
  color: #2F3640
}

.custom-search .btn-search:active {
  transform: scale(.98)
}

/* Blog Details Page */
.textC_1D1E1CCC {
  color: #1D1E1CCC
}

.page_scroll_progress.progress-container {
  width: 100%;
  height: 4px;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1050
}

.page_scroll_progress .progress-bar:not(.progress.progress-1 .progress-bar) {
  height: 4px;
  width: 0;
  transition: width .1s ease
}

/* .blog__detail__content .page__content .blog_thumbnail{} */
/* Style all h2, h3, p inside .page__content except inside .blog_level_cta or .alert__box */
/* Outer blog headings and paragraphs (excluding boxes) */
.blog__detail__content .page__content :is(h2, h3, h4, h5, h6):not(.blog_level_cta h2, .blog_level_cta h3, .blog_level_cta h4, .blog_level_cta h5, .blog_level_cta h6, .blog_level_cta p, .alert__box h2, .alert__box h3, .alert__box h4, .alert__box h5, .alert__box h6, .alert__box p) {
  margin-top: 2rem !important;
  margin-bottom: 1rem;
  font-size: 1.375rem;
  font-size: 1.125rem;
  font-weight: 600
}

.blog__detail__content .page__content :is(p):not(.blog_level_cta h2, .blog_level_cta h3, .blog_level_cta h4, .blog_level_cta h5, .blog_level_cta h6, .blog_level_cta p, .alert__box h2, .alert__box h3, .alert__box h4, .alert__box h5, .alert__box h6, .alert__box p) {
  margin-bottom: 1.5rem
}

/* Heading sizes and weight */
/*.blog__detail__content .page__content :is(h2):not(.blog_level_cta h2, .alert__box h2) {
  font-size: 2rem;
  font-weight: 600
}

.blog__detail__content .page__content :is(h3):not(.blog_level_cta h3, .alert__box h3) {
  font-size: 1.75rem;
  font-weight: 600
}

.blog__detail__content .page__content :is(h4):not(.blog_level_cta h4, .alert__box h4) {
  font-size: 1.5rem;
  font-weight: 600
}

.blog__detail__content .page__content :is(h5):not(.blog_level_cta h5, .alert__box h5) {
  font-size: 1.25rem;
  font-weight: 600
}

.blog__detail__content .page__content :is(h6):not(.blog_level_cta h6, .alert__box h6) {
  font-size: 1rem;
  font-weight: 600
}*/

/* Paragraph styling */
.blog__detail__content .page__content :is(p):not(.blog_level_cta p, .alert__box p),
.callout,
:is(.blog__detail__content .page__content ul, ul.custom__lists) li {
  font-size: clamp(1rem, 2vw, 1.125rem);
  font-weight: 400;
  color: rgba(45, 44, 43, 0.8);
}

#toc {
  /*list-style: none;*/
  margin: 0 0 40px
    /*padding: 0;counter-reset: toc-counter;*/
}

#toc li {
  counter-increment: toc-counter;
  position: relative
}

#toc li::marker {
  color: #52B8DB
}

/* #toc li::before{content:"";display:inline-block;height:2px;width:2px;border-radius:50rem;background-color:#52B8DB;} */
/* #toc li::before {position: absolute;top:1rem;font-size:clamp(1rem,2vw,1.375rem);font-weight:500;content:counter(toc-counter, decimal-leading-zero);color:#52B8DB;} */
/* #toc li::after {content: "";display:block;width:50%;height:2px;background-color:#52B8DB;} */
#toc li:last-child::after {
  display: none
}

#toc a {
  color: #000;
  text-decoration: none;
  font-size: clamp(1rem, 2vw, 1.125rem);
  font-weight: 500;
  line-height: clamp(30px, 2vw, 36px)
    /*padding-left:30px;padding-block:1rem;display: block;*/
}

#toc a:hover {
  color: #52B8DB
}

#toc a.toc-active {
  font-weight: 600;
  color: #52B8DB
}

.sidebar-card .d-flex.mb-3.pb-3.border-bottom:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border: 0 !important
}

:is(.blog__detail__content .page__content ul, ul.custom__lists) {
  padding: 0;
  list-style: none
}

:is(.blog__detail__content .page__content ul, ul.custom__lists) li {
  position: relative;
  /* padding-left: 20px;
  padding-block: 5px; */
  /*  */
  padding-block: 6px;
  font-size: 18px;
  line-height: 30px;
  color: rgba(45, 44, 43, 0.8);
  position: relative;
  padding-left: 20px;
}

:is(.blog__detail__content .page__content ul, ul.custom__lists) li::before {
  /*content: '';
  position: absolute;
  top: clamp(14px, 2vw, 16px);
  left: 0;
  width: 12px;
  height: 2px;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='2' viewBox='0 0 12 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FF7400' d='M0 0h8v2H0zm10 0h2v2h-2z'/%3E%3C/svg%3E")*/
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: rgba(130, 130, 130, 0.55);
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 4px;
  position: absolute;
  left: 0px;
  top: 18px;
}

:is(.blog__detail__content .page__content ul, ul.custom__lists) li.fs-5 {
  padding-left: 25px
}

:is(.blog__detail__content .page__content ul, ul.custom__lists) li.fs-5::before {
  top: 16px;
  height: 3px
}

.alert__box.tip-box {
  /*border-left: 4px solid #74BDDD;*/
  background-color: #74BDDD1A;
  border-radius: 20px;
  padding: clamp(18px, 2vw, 21px) clamp(24px, 2vw, 93px);
  display: flex;
  align-items: flex-start;
  gap: .75rem
}

.alert__box .tip-text {
  font-size: clamp(20px, 2vw, 22px);
  line-height: 1.5;
  color: #2D2C2B;
  font-weight: 400
}

.alert__box .tip-text b {
  font-weight: 600
}

.alert__box .tip-text a {
  color: var(--bs-primary);
  text-decoration: underline;
  font-weight: 400
}

.blog__detail__content {
  padding-bottom: 2rem
}

/* Pricing Page */
/* Toggle switch custom */
.textC_1D1E1C {
  color: #1D1E1C
}

.textC_1D1E1C99 {
  color: #1D1E1C99
}

.gap-13 {
  gap: 13px
}

.gap-20 {
  gap: 20px
}

.account__plan .form-check-input {
  width: 63px;
  height: 36px;
  cursor: pointer;
  background-color: #f0f0f0;
  border: none;
  border-radius: 20px;
  transition: background-color .3s ease, box-shadow .3s ease
}

.account__plan .form-check-input {
  background-color: #ff7900;
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important
}

.account__plan .form-check-input:checked {
  background-color: #ff7900
}

.account__plan .form-check-input:focus {
  box-shadow: none
}

.account__plan .form-check-input:checked::before {
  transform: translateX(22px)
}

.account__plan #saveBadge {
  background: var(--bs-primary-10);
  color: #ff7900;
  padding: 4px 9px;
  border-radius: 4px
}

.account__plan .form-check-input.small {
  width: 42px;
  height: 24px
}

/* Base style for labels */
.account__plan .billing-label {
  color: #2D2C2B80;
  /* light grayish */
  font-weight: 400;
  transition: color .3s ease, font-weight .3s ease
}

.account__plan .billing-label.active {
  color: #2D2C2B;
  /* dark */
  font-weight: 500
}

.account__plan .card__wrapper .price__card {
  --bs-card-spacer-y: 2.5rem;
  --bs-card-spacer-x: 2.5rem;
  border-radius: 30px 0 30px 0
}

.account__plan .card__wrapper .price__card .btn {
  --bs-btn-padding-x: 1.5625rem;
  --bs-btn-padding-y: 1rem
}

.account__plan .card__wrapper .price__card.price__premium {
  border-color: #FF7400;
  margin-left: -30px;
  --minus_card: 30px;
  height: calc(100% + var(--minus_card)) !important;
  margin-top: calc(-1 * var(--minus_card));
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: contain
}

.account__plan .card__wrapper .price__card.price__premium .badge {
  --bs-badge-padding-x: 1.375rem;
  --bs-badge-padding-y: .9375rem;
  --bs-badge-font-size: 1.25rem;
  margin: -30px;
}

.card__switcher {
  padding-bottom: 3rem
}

table.price__custom__table tr:not(:last-child) {
  border-bottom: 1px solid var(--bs-table-border-color)
}

table.price__custom__table :is(th, td) {
  padding: 17px 20px;
  border: 0 !important;
  box-shadow: none !important;
  vertical-align: middle
}

table.price__custom__table tr th:first-child,
table.price__custom__table tr td:first-child {
  max-width: 477px;
  width: 477px
}

table.price__custom__table td {
  font-size: 20px;
  font-weight: 600
}

table.price__custom__table :is(th, td):not(:first-child) {
  text-align: center;
  font-size: 18px;
  font-weight: 500
}

table.price__custom__table th .btn {
  --bs-btn-padding-x: 3rem
}

table.price__custom__table tbody td:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-width: 0 0 0 1px
}

.btn-primary-2 {
  background: #ff74002b;
  color: #FF7400
}

.btn-primary-2:hover {
  background: #ff7400ff;
  color: #FFF
}

.account__plan__detail~.__features {
  padding-bottom: 90px
}

.pricing .blog_level_cta {
  padding: 44px 50px;
  background: #52b8db14;
  border-radius: 20px
}

.accordion {
  --bs-accordion-btn-padding-x: 30px;
  --bs-accordion-btn-padding-y: 23px;
  --bs-accordion-bg: var(--bs-bg-one);
  --bs-accordion-inner-border-radius: 20px
}

.custom__accordion1.accordion {
  --bs-accordion-btn-padding-x: 30px;
  --bs-accordion-btn-padding-y: 23px;
  --bs-accordion-bg: var(--bs-bg-one);
  --bs-accordion-inner-border-radius: 20px;
  --bs-accordion-active-bg: var(--bs-bg-one);
  --bs-accordion-border-width: 0;
  --bs-accordion-active-color: var(--black)
}

.custom__accordion2.accordion {
  --bs-accordion-btn-padding-x: 30px;
  --bs-accordion-btn-padding-y: 23px;
  --bs-accordion-bg: transparent;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-active-bg: var(--bs-primary-10);
  --bs-accordion-border-width: 0;
  --bs-accordion-border-color: #e0e0e075;
  --bs-accordion-active-color: var(--black)
}

.accordion-button {
  border-radius: 4px;
  font-size: 1.5625rem;
  font-weight: 600
}

.accordion-button {
  border-top: 1px solid var(--bs-accordion-border-color)
}

.accordion-button:not(.collapsed) {
  border-color: var(--bs-accordion-active-bg)
}

.accordion-button::after {
  filter: invert(51%) sepia(87%) saturate(2199%) hue-rotate(7deg) brightness(100%) contrast(103%)
}

.accordion-item {
  background-color: transparent
}

.accordion-body {
  font-size: 20px
}

.border-primary {
  border-color: var(--bs-primary) !important
}


.border-DBE4E8 {
  border-color: #DBE4E8 !important;
}



.alert-primary {
  --bs-alert-color: var(--bs-primary);
  --bs-alert-bg: var(--bs-bg-one);
  --bs-alert-border-color: var(--bs-primary);
  --bs-alert-link-color: var(--bs-primary)
}

dl.rules-control dt {
  font-weight: 500
}

dl.rules-control dd {
  text-align: end;
  font-weight: 600
}

/* dl.rules-control dd {text-align: end;font-weight: 600;} */
.reply-card {
  border: 1px solid var(--px-border);
  border-radius: 12px
}

.accepted {
  border-color: #16a34a
}

/* Quiz & Quiz Result Page CSS */
:root {
  --bs-success: #16A34A
}

.padding-20 {
  padding: 20px
}

.footer-answr {
  padding-block: 2.125rem
}

.banner.ok {
  background: #DCFCE7;
  color: var(--ok-ink);
  border-color: #DCFCE7 !important
}

.banner.bad {
  background: #EA2B2B1A;
  color: var(--bad-ink);
  border-color: #EA2B2B1A !important
}

.banner .msg {
  font-weight: 600
}

.btn[disabled] {
  opacity: .5;
  cursor: not-allowed
}

.hidden {
  display: none !important
}

.score__wrp .s-card {
  padding: 1px
}

.speech__box {
  padding: 20px;
  border: 1px solid #D9D9D9;
  position: relative
}

.speech__box::before {
  content: '';
  position: absolute;
  top: 25%;
  left: -20px;
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='21' viewBox='0 0 22 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M20.927 1.309 1.552 8.54l18.926 10.927' stroke='%23D9D9D9'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h22v21H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  width: 20px;
  height: 20px;
  background-color: #fff
    /* match border color */
}

:root {
  --feed-title-text-h1: #24262b;
  --feed-text-desc: #3d3c3c;
  --feed-text-link: #2b78f5;
  --feed-btn-bg: #000
    /* --feed-username:; */
}

.thread-title .tread-link {
  color: var(--bs-secondary);
  text-decoration: none;
  line-height: normal
}

.thread-title .tread-link:hover {
  color: var(--bs-primary)
}

.thread-desc {
  color: var(--feed-text-desc)
}

.thread-box a {
  color: var(--feed-text-link)
}

article.thread-box {
  border: 0;
  border-bottom: 1.5px solid #f6f7f9;
  transition: all .2s ease-in-out
}

article.thread-box:hover {
  background-color: #F6F7F9
}

.quick-links li {
  margin-bottom: 6px
}

#flashbackModal {
  --bs-modal-header-padding: 50px 50px 0;
  --bs-modal-padding: 30px 50px 0
}

#flashbackModal .modal-dialog {
  --bs-modal-width: 924px
}

#flashbackModal .modal-footer {
  padding: 20px 50px
}

#flashbackModal .modal-content {
  border-radius: 16px;
  box-shadow: 0 8px 24px #0000001a
}

/* Question Card */
#flashbackModal .question-card {
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 16px;
  background: #fff
}

#flashbackModal .answer-row .ans-bad h4 {
  color: #EA2B2B
}

#flashbackModal .answer-row .ans-ok h4 {
  color: #16A34A;
  position: relative
}

#flashbackModal .answer-row h4 {
  position: relative;
  padding-left: 26px
}

#flashbackModal .answer-row h4::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  --check: 21px;
  width: var(--check);
  height: var(--check);
  background-size: cover;
  display: block
}

.white-space-nowrap {
  white-space: nowrap
}

#flashbackModal .answer-row .ans-ok h4::before {
  background-image: url(../media/right-ansr.svg)
}

#flashbackModal .answer-row .ans-bad h4::before {
  background-image: url(../media/wrong-ansr.svg)
}

#flashbackModal .answer-row table tr:first-child td {
  padding-bottom: 14px
}

/* #flashbackModal .answer-row table tr:last-child td{

        padding-top: 20px;

      } */
#flashbackModal .answer-row table tr:last-child td:last-child,
#flashbackModal .answer-row table tr:first-child td {
  line-height: 1.22
}

#flashbackModal .answer-row table :is(th, td) {
  border: 0;
  padding: 0;
  padding-bottom: 4px
}

.quiz-progress .progressbar {
  width: 300px;
  /* apni requirement ke hisaab se */
  height: 14px;
  background: #e5e5e5;
  border-radius: 50px;
  overflow: hidden;
  position: relative
}

.quiz-progress .progressbar span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #16A34A, #22C55E);
  border-radius: 50px;
  transition: width .8s cubic-bezier(0.25, 1, 0.5, 1);
  /* smooth easing */
  box-shadow: 0 0 8px #16a34a99
}

.check__list__stroke li {
  position: relative;
  padding-left: 30px;
  padding-block: 10px
}

.check__list__stroke li::before {
  content: '';
  position: absolute;
  top: 11px;
  left: 0;
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)' stroke='%23FF7400'%3E%3Cpath d='M11 .5C16.799.5 21.5 5.201 21.5 11S16.799 21.5 11 21.5.5 16.799.5 11 5.201.5 11 .5Z'/%3E%3Cpath d='m6.418 11.367 3.437 3.3 5.73-5.5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h22v22H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-size: cover;
  background-position: center
}

.plain__accordion {
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-btn-padding-y: 23px;
  --bs-accordion-bg: transparent;
  --bs-accordion-inner-border-radius: 20px;
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg width='32' height='33' viewBox='0 0 32 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 7.34v18.667m-9.332-9.333h18.667'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .674h32v32H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg width='32' height='33' viewBox='0 0 32 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 7.34v18.667m-9.332-9.333h18.667'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .674h32v32H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  --bs-accordion-active-bg: transparent;
  --bs-accordion-btn-icon-width: 2rem;
  --bs-accordion-border-color: #D4D4D4
}

.plain__accordion .accordion-button::after {
  filter: none
}

.plain__accordion .accordion-item:first-child {
  border-top: 1px solid #D4D4D4
}

.help-block {
  color: #dc3545
}

.flash-msg-box {
  position: absolute;
  right: 15px;
  top: 15px;
  z-index: 11111
}



/* <<<<<<< HEAD */
/* >>>>>>> osama-dev */
/* >>>>>>> arbaz-dev */
/* ===== MEDIA QUERY ===== */


/* @media (1500px width 1600px) {
  .hiw-rail {
    top: clamp(25px, 17vw, 253px)
  }
} */

/* new Main dashbaoard v3-2 */
/* ==============================================

   PIPLIX DASHBOARD V3.2 — Premium Consumer App

   Clean, Spacious, Expensive

   ============================================== */
/* ========== TOP NAV ========== */
.topnav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--px-card);
  border-bottom: 1px solid #0000000a
}

.topnav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px
}

.brand img {
  height: 32px
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0
}

.nav-links a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--px-radius-xs);
  font-size: 15px;
  font-weight: 600;
  color: var(--px-text-muted);
  text-decoration: none;
  transition: all .2s ease
}

.nav-links a:hover {
  color: var(--px-heading);
  background: var(--px-bg)
}

.nav-links a.active {
  color: var(--px-primary);
  background: var(--px-primary-light)
}

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

.stat-pills {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px;
  background: var(--px-bg);
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  color: var(--px-heading)
}

.stat-pills svg {
  width: 18px;
  height: 18px
}

.stat-divider {
  width: 1px;
  height: 18px;
  background: #e2e8f0
}

.profile-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--px-primary), #FF9533);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: transform .2s ease
}

.profile-btn:hover {
  transform: scale(1.05)
}

.mobile-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--px-heading)
}



/* ========== DASHBOARD LAYOUT ========== */
.dashboard-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 32px 80px
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 40px;
  align-items: start
}

/* ========== CARD SYSTEM V3.2 ========== */
.card-v32 {
  background: var(--px-card);
  border: 0;
  border-radius: var(--px-radius);
  padding: 28px;
  box-shadow: var(--px-shadow);
  transition: all .25s ease
}

.card-v32:hover {
  box-shadow: var(--px-shadow-hover);
  transform: translateY(-2px)
}

.card-v32 .card-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px
}

.card-v32 .card-subtitle {
  font-size: 15px;
  color: var(--px-text-muted);
  margin: 0
}

/* ========== HERO DRILL CARD (Orange Variant) ========== */
.hero-drill {
  background: linear-gradient(135deg, #FF7400 0%, #FF9533 100%);
  border-radius: var(--px-radius);
  padding: 36px 40px;
  box-shadow: 0 10px 30px -5px #ff740066;
  position: relative;
  overflow: hidden;
  color: #fff
}

.hero-drill::before {
  content: '';
  position: absolute;
  right: -20px;
  top: -20px;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, #fff3 0%, transparent 70%);
  border-radius: 50%
}

.hero-drill .badge-daily {
  display: inline-block;
  padding: 6px 14px;
  background: #fff;
  color: var(--px-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  border-radius: 50px;
  margin-bottom: 16px
}

.hero-drill h2 {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px
}

.hero-drill p {
  font-size: 16px;
  color: #ffffffe6;
  margin: 0 0 24px
}

/* Button override for Orange Card */
.hero-drill .btn-jelly {
  background: #fff;
  color: var(--px-primary);
  box-shadow: 0 4px 14px #0000001a
}

.hero-drill .btn-jelly:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 24px #00000026;
  color: var(--px-primary)
}

/* Jelly Button */
.btn-jelly {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  background: var(--px-primary);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 14px #ff740059;
  transition: all .2s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  z-index: 1
}

.btn-jelly:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 24px #ff740066;
  color: #fff
}

.btn-jelly:active {
  transform: scale(0.96);
  box-shadow: 0 2px 8px #ff74004d
}

.btn-jelly i {
  font-size: 18px
}

/* Progress Hero (In Progress) */
.hero-progress {
  background: var(--px-card);
  border-left: 4px solid var(--px-warning);
  color: var(--px-heading)
    /* Reset text color for white card */
}

.hero-progress h2,
.hero-progress h3 {
  color: var(--px-heading)
}

.hero-progress p {
  color: var(--px-text-muted)
}

.hero-progress .progress-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: conic-gradient(var(--px-primary) var(--progress, 0%), #e2e8f0 0%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.hero-progress .progress-ring-inner {
  width: 52px;
  height: 52px;
  background: var(--px-card);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--px-heading)
}

/* Completed State */
.hero-completed {
  background: var(--px-success-light);
  border: 1px solid #86EFAC;
  padding: 20px 28px;
  color: var(--px-heading)
    /* Reset text color */
}

.hero-completed .check-icon {
  width: 44px;
  height: 44px;
  background: var(--px-success);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0
}

/* ========== CONTINUE LEARNING ========== */
.continue-card-wrapper {
  background: linear-gradient(180deg, #FFF7ED 0%, #FFF 100%);
  border-radius: var(--px-radius);
  overflow: hidden;
  box-shadow: var(--px-shadow);
  transition: all .25s ease
}

.continue-card-wrapper:hover {
  box-shadow: var(--px-shadow-hover);
  transform: translateY(-2px)
}

.continue-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px
}

.continue-icon {
  width: 64px;
  height: 64px;
  background: #fff;
  border-radius: var(--px-radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px #0000000d
}

.continue-icon svg {
  width: 32px;
  height: 32px;
  color: var(--px-primary)
}

.continue-info {
  flex: 1
}

.continue-info h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--px-heading)
}

.continue-info p {
  font-size: 14px;
  color: var(--px-text-muted);
  margin: 0
}

.btn-resume {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: #fff;
  color: var(--px-primary);
  font-size: 15px;
  font-weight: 700;
  border: 1px solid var(--px-primary);
  border-radius: 50px;
  text-decoration: none;
  transition: all .2s ease
}

.btn-resume:hover {
  background: var(--px-primary);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px #ff740033
}

/* ========== SPONSORED AD - Premium Dark ========== */
.sponsor-card {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-radius: var(--px-radius);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 20px
}

.sponsor-logo {
  width: 56px;
  height: 56px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.sponsor-logo img {
  width: 100%;
  height: auto;
  border-radius: 8px
}

.sponsor-content {
  flex: 1
}

.sponsor-label {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .5px
}

.sponsor-title {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin: 4px 0 2px
}

.sponsor-disclaimer {
  font-size: 12px;
  color: #64748b
}

.btn-sponsor {
  padding: 10px 20px;
  background: #ffffff1a;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid #fff3;
  border-radius: var(--px-radius-xs);
  text-decoration: none;
  transition: all .2s ease
}

.btn-sponsor:hover {
  background: #ffffff26;
  color: #fff
}

/* ========== INTEL & COMMUNITY ROW ========== */
.intel-community-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px
}

.intel-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #f1f5f9
}

.intel-item:last-child {
  border-bottom: none;
  padding-bottom: 0
}

.intel-item:first-child {
  padding-top: 0
}

.impact-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px
}

.impact-dot.high {
  background: #f87171
}

.impact-dot.med {
  background: #fbbf24
}

.impact-dot.low {
  background: #86efac
}

.intel-item .headline {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--px-heading);
  line-height: 1.4
}

.intel-item .time {
  font-size: 12px;
  color: var(--px-text-light);
  flex-shrink: 0
}

.thread-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
  text-decoration: none;
  transition: opacity .15s ease
}

.thread-item:hover {
  opacity: .8
}

.thread-item:last-child {
  border-bottom: none
}

.thread-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--px-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--px-text-muted);
  flex-shrink: 0
}

.thread-content {
  flex: 1
}

.thread-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--px-heading)
}

.thread-meta {
  font-size: 12px;
  color: var(--px-text-muted)
}

.thread-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 6px
}

.thread-tag.idea {
  background: #ede9fe;
  color: #7c3aed
}

.thread-tag.bug {
  background: #fee2e2;
  color: #dc2626
}

/* ========== DAILY REPORTS CARD (New) ========== */
.daily-reports-card {
  background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
  border-radius: var(--px-radius);
  padding: 28px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 280px
}

.report-content {
  position: relative;
  z-index: 2;
  max-width: 65%
}

.report-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--px-heading);
  margin-bottom: 12px;
  line-height: 1.2
}

.report-desc {
  font-size: 14px;
  color: var(--px-text);
  margin-bottom: 24px;
  line-height: 1.5
}

.btn-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--px-heading);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: transform .2s ease
}

.btn-download:hover {
  transform: translateY(-2px);
  background: #000
}

.report-img-container {
  position: absolute;
  right: -30px;
  bottom: -40px;
  width: 180px;
  height: 220px;
  transition: transform .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  perspective: 1000px
}

.report-tablet {
  width: 100%;
  height: 100%;
  background: #fff;
  border: 4px solid #f1f5f9;
  border-radius: 12px;
  box-shadow: 0 10px 25px -5px #0000001a;
  transform: rotateY(-15deg) rotateX(10deg) rotateZ(-5deg);
  transition: transform .4s ease;
  overflow: hidden;
  position: relative;
  background-image: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%)
}

/* Simple graph illustration on tablet */
.report-tablet::before {
  content: '';
  position: absolute;
  bottom: 20px;
  left: 10px;
  right: 10px;
  height: 60px;
  background: #cbd5e1;
  clip-path: polygon(0 100%, 0 80%, 20% 60%, 40% 70%, 60% 40%, 80% 50%, 100% 20%, 100% 100%);
  opacity: .5
}

.daily-reports-card:hover .report-tablet {
  transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateY(-10px) scale(1.05);
  box-shadow: 0 20px 30px -10px #00000026
}

/* ========== SIDEBAR WIDGETS ========== */
.widget-stack {
  display: flex;
  flex-direction: column;
  gap: 24px
}

/* Lix Says - Speech Bubble Style */
.lix-widget {
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
  border: 1px solid #FDBA74;
  border-radius: var(--px-radius);
  padding: 24px;
  position: relative
}

.lix-widget::after {
  content: none
}

.lix-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px
}

.lix-header .emoji {
  font-size: 32px
}

.lix-header .label {
  font-size: 14px;
  font-weight: 700;
  color: var(--px-primary)
}

.lix-widget .quote {
  font-size: 15px;
  color: var(--px-heading);
  line-height: 1.6
}

/* Trophy/Badge Card */
.badge-card .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px
}

.badge-grid {
  display: flex;
  gap: 12px
}

.badge-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 8px;
  background: var(--px-bg);
  border-radius: var(--px-radius-xs);
  transition: all .2s ease
}

.badge-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px #0000000f
}

.badge-item .icon {
  font-size: 28px;
  margin-bottom: 8px
}

.badge-item .name {
  font-size: 12px;
  font-weight: 600;
  color: var(--px-heading);
  text-align: center
}

.badge-meta {
  font-size: 13px;
  color: var(--px-text-muted);
  text-align: center;
  margin-top: 14px
}

/* Quick Tools */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px
}

.tool-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 16px;
  background: var(--px-bg);
  border: 0;
  border-radius: var(--px-radius-sm);
  text-decoration: none;
  color: var(--px-text);
  transition: all .2s ease
}

.tool-btn:hover {
  color: var(--px-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px #0000000f
}

.tool-btn i {
  font-size: 24px;
  margin-bottom: 10px
}

.tool-btn span {
  font-size: 13px;
  font-weight: 600
}

/* Upgrade Card */
.upgrade-card {
  background: linear-gradient(135deg, var(--px-dark) 0%, #334155 100%);
  border-radius: var(--px-radius);
  padding: 28px;
  text-align: center;
  color: #fff
}

.upgrade-card .crown {
  font-size: 40px;
  margin-bottom: 12px
}

.upgrade-card h4 {
  color: #fff;
  font-size: 18px;
  margin-bottom: 8px
}

.upgrade-card p {
  color: #94a3b8;
  font-size: 14px;
  margin: 0 0 20px
}

.btn-upgrade {
  display: inline-block;
  width: 100%;
  padding: 14px;
  background: linear-gradient(90deg, var(--px-primary), #FF9533);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: 50px;
  text-decoration: none;
  transition: all .2s ease
}

.btn-upgrade:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 20px #ff740059;
  color: #fff
}

/* Rex Analytics */
.rex-widget {
  background: linear-gradient(135deg, var(--px-purple-light), #DDD6FE);
  border: 1px solid #A78BFA
}

.rex-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px
}

.rex-header .emoji {
  font-size: 32px
}

.rex-header .label {
  font-size: 14px;
  font-weight: 700;
  color: var(--px-purple)
}

.rex-stat {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 14px
}

.rex-stat .val {
  font-weight: 700
}

.rex-stat .val.up {
  color: var(--px-success)
}

/* ========== STATE VISIBILITY ========== */
.free-only {
  display: block
}

.paid-only {
  display: none
}

[data-plan="paid"] .free-only {
  display: none !important
}

[data-plan="paid"] .paid-only {
  display: block !important
}

/* [data-drill-state="not_started"] .drill-ui-progress,

[data-drill-state="not_started"] .drill-ui-complete {

    display: none !important;

} */
/* [data-drill-state="in_progress"] .drill-ui-start,

[data-drill-state="in_progress"] .drill-ui-complete {

    display: none !important;

} */
[data-drill-state="completed"] .drill-ui-start,
[data-drill-state="completed"] .drill-ui-progress {
  display: none !important
}

/* ========== LOADING OVERLAY ========== */
.drill-loader {
  position: fixed;
  inset: 0;
  background: #fffffff5;
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease
}

.drill-loader.active {
  opacity: 1;
  pointer-events: auto
}

.drill-loader .lix {
  font-size: 56px;
  animation: bounce 1s infinite
}

@keyframes bounce {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-12px)
  }
}

.drill-loader .text {
  font-size: 20px;
  font-weight: 700;
  color: var(--px-heading);
  margin: 20px 0 10px
}

.drill-loader .steps {
  font-size: 14px;
  color: var(--px-text-muted)
}

.drill-loader .steps span {
  margin: 0 6px
}

.drill-loader .steps span.done {
  color: var(--px-success)
}

.drill-loader .bar {
  width: 240px;
  height: 5px;
  background: #e2e8f0;
  border-radius: 3px;
  margin-top: 20px;
  overflow: hidden
}

.drill-loader .bar .fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--px-primary), #FF9533);
  border-radius: 3px;
  animation: load 1.2s ease forwards
}

@keyframes load {
  to {
    width: 100%
  }
}

/* ========== DEV TOGGLE ========== */
.dev-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999
}

.dev-toggle .pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--px-dark);
  color: #94a3b8;
  font-size: 13px;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  transition: all .15s ease
}

.dev-toggle .pill:hover {
  background: #1e293b;
  color: #fff
}

.dev-toggle .panel {
  position: absolute;
  bottom: 52px;
  right: 0;
  background: var(--px-dark);
  border-radius: var(--px-radius-xs);
  padding: 16px 20px;
  min-width: 200px;
  display: none
}

.dev-toggle.open .panel {
  display: block
}

.dev-toggle label {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .5px
}

.dev-toggle select {
  width: 100%;
  padding: 8px 10px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
  margin-bottom: 12px
}

.dev-toggle .sim-btn {
  width: 100%;
  padding: 10px;
  background: var(--px-success);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer
}

/* ========== TOAST ========== */
.toast-msg {
  position: fixed;
  top: 88px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--px-success);
  color: #fff;
  padding: 14px 28px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 8px 24px #22c55e4d;
  z-index: 10001;
  animation: toastIn .3s ease
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-12px)
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0)
  }
}

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


/* Link styles */
.view-all-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--px-text-muted);
  text-decoration: none;
  transition: color .15s ease
}

.view-all-link:hover {
  color: var(--px-primary)
}

/* ========== VERA WIDGET V2 ========== */
.vera-widget-grid {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  align-items: center
}

.vera-video-thumb {
  width: 80px;
  height: 110px;
  background-color: #000;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center top;
  box-shadow: 0 4px 10px #00000026;
  cursor: pointer;
  transition: transform .2s ease
}

.vera-video-thumb:hover {
  transform: scale(1.05)
}

.vera-play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0000004d
}

.vera-play-icon i {
  color: #fff;
  font-size: 24px;
  filter: drop-shadow(0 2px 4px #00000080)
}

.vera-feed-list {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.vera-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-decoration: none;
  transition: opacity .2s
}

.vera-item:hover {
  opacity: .8
}

.bs-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
  white-space: nowrap;
  margin-top: 2px
}

.bs-badge.high {
  background: #FEF2F2;
  color: #EF4444;
  border-color: #FECACA
}

.bs-badge.low {
  background: #F0FDF4;
  color: #166534;
  border-color: #BBF7D0
}

.vera-item .headline {
  font-size: 14px;
  font-weight: 600;
  color: var(--px-heading);
  line-height: 1.3
}

.vera-item .headline span {
  color: var(--px-text-muted);
  font-weight: 400;
  font-size: 13px;
  margin-left: 4px
}

:root {
  --overlay: #0009;
  --skyblue-8: #52b8db2b;
  --skyblue-20: #52b8db33;
  --skyblue-0: #52b8db00
}

.custom-list.list-compact li.current-lesson::after {
  animation: animate-pulse 1.5s linear infinite
}

.bg-f5f5f5 {
  background-color: #F5F5F5 !important
}

.selectCalc {
  appearance: none;
  background-color: transparent;
  border: 0;
  font-size: 24px;
  font-weight: 500;
  color: #000;
  padding: 0
}

:focus,
:focus-visible {
  box-shadow: none !important;
  outline: none !important
}

.text-12244C {
  color: #12244C !important
}

/* .tool-box .tool-text h3.fs-3{font-size:1.625rem !important;line-height:2.125rem !important;} */
.tool-box .tool-text h3.fs-3 {
  font-size: 1.5rem !important;
  line-height: 2rem !important
}

.tool-box .tool-text .fs-18 {
  font-size: clamp(14px, 2vw, 16px)
}

/* =============== VERA SECTION - ONLY ESSENTIAL CSS =============== */
/* News Badges with Colored Dots (can't do with Bootstrap) */
.news-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  background: transparent
}

.news-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0
}

.news-badge-medium {
  color: #6B7280
}

.news-badge-medium::before {
  background: #F59E0B
}

.news-badge-high {
  color: #6B7280
}

.news-badge-high::before {
  background: #EF4444
}

.news-badge-low {
  color: #6B7280
}

.news-badge-low::before {
  background: #10B981
}

/* News Styling */
.news-time {
  font-size: 12px;
  color: #9CA3AF;
  font-weight: 400
}

.news-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: #1F2937;
  margin: 0;
  transition: color .2s ease
}

.news-item {
  border-bottom: 1px solid #F3F4F6
}

.news-item:last-child {
  border-bottom: none !important
}

.news-item a:hover .news-title {
  color: #FF7400
}

.never__learn__alone .img-wrp {
  margin-bottom: -180px
}

.never__learn__alone .img-wrp .small {
  margin-bottom: -100px
}

.z-20 {
  z-index: 20
}

.breaking-news-badge {
  background: #FDEAEA;
  color: #EA2B2B;
  padding: 4px 20px 4px 20px;
  transform: translateY(-100%);
  border-radius: 0px 100px 0px 0px;
}

.text-585858 {
  color: #585858
}

.text-2D2C2B73 {
  color: #2D2C2B73
}

.text-8D8D8C {
  color: #8D8D8C
}

/* News Badge Styles */
.badge.badge-common {
  background: #F8F9FA;
  color: #585858;
  padding: 6px 12px 6px 24px;
  position: relative;
}

.badge.badge-common::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--badge-color);
  box-shadow: 0 0 0 2px var(--badge-shadow)
}

/* Warning - Orange */
.badge-common.badge-warning::before {
  --badge-color: #f59e0b;
  --badge-shadow: #f59e0b40
}

/* Danger - Red */
.badge-common.badge-danger::before {
  --badge-color: #EF4444;
  --badge-shadow: #ef444440
}

/* Success - Green */
.badge-common.badge-success::before {
  --badge-color: #16a34a;
  --badge-shadow: #16a34a40
}

.compare__card {
  --bs-card-spacer-y: 27px;
  --bs-card-spacer-x: 27px;
  --bs-card-border-color: #00000029;
  --bs-card-border-width: 2px;
  --bs-card-border-radius: 12px;
  transition: all 300ms ease;
}

.compare__card:hover {
  background-color: #FF74001A;
  border-color: #FF740029;
}

/* ========== Trader Growth System — Tabs ========== */
.tgs-tabs-wrapper {
  position: relative;
}

.tgs-nav {
  display: flex;
  align-items: center;
  gap: 48px;
}

.tgs-tab-btn {
  display: flex !important;
  align-items: center;
  gap: 24px;
  padding: 17px 0px !important;
  border: 0 !important;
  background: transparent !important;
  color: #2D2C2B !important;
  font-weight: 500 !important;
  font-size: 24px !important;
  white-space: nowrap;
  cursor: pointer;
  transition: color .25s ease;
  position: relative;
}

.tgs-tab-btn svg rect {
  fill-opacity: 0;
  transition: all 300ms ease;
}

.tgs-tab-btn.active svg rect {
  fill-opacity: 0.29;
}

.tgs-tab-btn:hover {
  color: #2D2C2B !important;
}

.tgs-tab-btn.active {
  color: #2D2C2B !important;
  font-weight: 600 !important;
}

.tgs-tab-label {
  line-height: 1.2;
}

/* Full-width gray separator line */
.tgs-separator {
  width: 100%;
  height: 1px;
  background: #e9ecef;
}

/* Active sky-blue underline that sits on the separator */
.tgs-underline {
  bottom: 0;
  height: 3px;
  background: #12244C;
  border-radius: 3px 3px 0 0;
  transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
  z-index: 1;
}

.swiper-pagination .swiper-pagination-bullet {
  width: 14px;
  height: 14px;
  background-color: #0000001A;
  opacity: 1;
  margin-inline: 8px !important;
}

.swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--bs-primary);
}



/* ── FOOTER ── */
.site-footer {
  color: #fff;
}

/* logo */
.footer-logo-img {
  height: 30px;
  width: auto;
}

/* login button */
.footer-login-btn {
  min-width: 200px;
  padding: 14px 48px !important;
  font-size: 16px !important;
  border-radius: 50px !important;
  line-height: 1 !important;
}

/* social icons */
.footer-social-icon {
  display: inline-flex;
  flex-shrink: 0;
  transition: opacity .2s;
}

.footer-social-icon:hover {
  opacity: .75;
}

/* column headings */
.footer-heading {
  font-size: 16px;
}

/* column links */
.site-footer .footer_nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer .footer_nav li {
  margin-bottom: 6px;
}

.site-footer .footer_nav li a {
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
  text-decoration: none;
  transition: color .2s;
}

.site-footer .footer_nav li a:hover {
  color: var(--bs-primary);
}

.footer-risk-box {
  padding: 14px 20px;
}

.footer-risk-toggle {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: rgba(255, 255, 255, .7);
}

.footer-risk-toggle svg {
  transition: transform .25s;
}

.footer-risk-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.footer-risk-text {
  font-size: 12px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .55);
  margin-top: 12px;
}

.footer-copyright-logo {
  height: auto;
  width: 45px;
}

.footer-copyright-text {
  font-size: 12px;
  color: rgba(255, 255, 255, .55);
}

.footer-legal-link {
  transition: color .2s;
}

.footer-legal-link:hover {
  color: var(--bs-primary);
}

.transition-container {
  height: 100%;
  overflow: hidden;
  transform: translateZ(0);
}

ul.vertical__slide {
  margin: 0;
  padding: 0;
  list-style: none;
  animation: listSlider 12s infinite;
}

ul.vertical__slide li {
  margin: 0;
  padding: 0;
}

.lh-1-4 {
  line-height: 1.4;
}

/* =========================================
    GLOBAL CUSTOM SELECT COMPONENT
    ========================================= */
.cs-wrapper {
  position: relative;
  width: 100%;
}

.cs-trigger {
  background: var(--bs-white);
  border-radius: 50rem;
  padding: .75rem 1.125rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  font-weight: 400;
  user-select: none;
  transition: background .2s ease;
}

.cs-trigger:hover {
  background: var(--bs-f8f9fa);
}

.cs-trigger:after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid #111;
  border-bottom: 2px solid #111;
  transform: rotate(45deg);
  transition: transform .3s ease;
}

.cs-wrapper.open .cs-trigger:after {
  transform: rotate(-135deg);
}

.cs-dropdown {
  position: absolute;
  top: 110%;
  left: 0;
  width: 100%;
  z-index: 1000;
  pointer-events: none;
  overflow: hidden;
  padding: .75rem .5rem .75rem 0;
  border-radius: 20px;
}

.cs-wrapper.open .cs-dropdown {
  opacity: 1;
}

.cs-dropdown-inner {
  border-radius: 0px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, opacity .25s ease;
  opacity: 0;
}

.cs-wrapper.open .cs-dropdown {
  pointer-events: auto;
}

.cs-wrapper.open .cs-dropdown-inner {
  max-height: 280px;
  opacity: 1;
  overflow-y: auto;
  padding: 0;
}

.cs-dropdown-inner::-webkit-scrollbar {
  width: 6px;
}

.cs-dropdown-inner::-webkit-scrollbar-thumb {
  background: #9CA3AF;
  border-radius: 10px;
}

.cs-option {
  padding: 14px 20px;
  cursor: pointer;
  font-size: 16px;
  transition: background .2s ease;
}

.cs-option:hover {
  background: #E0EBFF;
}

.cs-option.active {
  background: #E0EBFF;
}

.custom-select-base {
  display: none;
}

.next__week form input {
  max-width: 344px;
}


@media(min-width: 1567px) {
  .footer-answr {
    max-height: 125px
  }
}

@media(max-width: 1566px) {
  .result__score .character {
    height: 550px
  }
}

@media(min-width:1400px) {
  .alert__box.tip-box {
    background-color: #74BDDD1A;
    border-radius: 20px;
    padding: clamp(18px, 2vw, 21px) 93px
  }

  .hero-card {
    min-width: 19rem
  }

  .__headBody .row {
    --bs-gutter-x: 4.0625rem
  }

  .display-4 {
    line-height: 1.225 !important;
  }

  /* typo  */
  h1.display-3 {
    font-size: 4.25rem;
    line-height: 4.4rem
  }

  h2.display-4 {
    font-size: 3.75rem
  }

  #home-hero .banner_icon.bi_1 {
    top: 12rem;
    right: 40rem;
  }

  #home-hero .banner_icon.bi_2 {
    top: 3rem;
    right: 31rem;
  }

  #home-hero .banner_icon.bi_3 {
    top: 5rem;
    right: 19rem;
  }

  #home-hero .banner_icon.bi_4 {
    top: 14rem;
    right: 10rem;
  }
}

@media(max-width: 1399px) {
  .result__score .character {
    height: 460px
  }

  #home-hero .lix_main {
    top: 15%;
    right: -15%;
  }

  #home-hero .banner_icon.bi_1 {
    top: 36rem;
    right: 21rem;
  }

  #home-hero .banner_icon.bi_2 {
    top: 27rem;
    right: 13rem;
  }

  #home-hero .banner_icon.bi_3 {
    top: 29rem;
    right: 6rem;
  }

  #home-hero .banner_icon.bi_4 {
    top: 35rem;
    right: 0rem;
  }

  .compare__card .fs-22 {
    font-size: 20px;
  }

  .compare__card .fs-1 {
    font-size: 2rem;
  }

  .main_cta .cta-card {
    padding-block: 90px;
  }

  .never__learn__alone .img-wrp {
    margin-bottom: -80px;
  }

  .never__learn__alone .img-wrp .small {
    margin-bottom: -80px;
  }

  .user_thumb.thumb1 {
    top: 100px;
    left: 5rem;
  }

  .user_thumb.thumb2 {
    right: 7rem;
    top: 4rem;
  }

  .user_thumb.thumb3 {
    bottom: 10rem;
    left: 9rem;
  }

  .user_thumb.thumb4 {
    right: 10rem;
    bottom: 10rem;
  }
}

@media(max-width: 1299px) {
  .result__score .character {
    height: 650px
  }
}

@media(max-width: 1199px) {
  .dashboard-grid {
    grid-template-columns: 1fr 320px;
    gap: 32px
  }

  .opt {
    padding: 14px 24px
  }

  .options {
    gap: 14px
  }
}

@media (max-width: 1024px) {
  .img-fluid-m {
    width: 100%
  }

  .fs-18 {
    font-size: clamp(15px, 2vw, 15px)
  }

  .tool-icon img {
    max-width: 100%;
    height: auto
  }

  /* banner  */
  #course_list.main-banner .img_wrapper img {
    right: 0;
    height: 50%;
    object-fit: cover;
    top: 25% !important
  }

  .form-select.r-filter {
    padding: .7rem .9rem;
    font-size: 1rem;
    background-position: right 1rem center
  }

  #clear-filters {
    padding: .5rem .8rem;
    line-height: 0;
    font-size: 18px
  }

  /* offcanvas  */
  header .offcanvas-body {
    margin-left: 0
  }

  #navOff.offcanvas {
    height: var(--bs-offcanvas-height)
  }

  .result__score .character {
    height: 650px
  }

  .result__score .character {
    height: 450px
  }

  .result__score .character img {
    object-fit: contain
  }

  .header-transparent {
    margin-bottom: -100px;
    border: 0;
    background: transparent;
    width: 100%;
    z-index: 6;
    opacity: 1;
  }

  .user_thumb.thumb2 {
    right: 20%;
    top: 13%
  }

  /* btn  */
  .btn {
    --bs-btn-font-size: 1rem
  }

  .btn.btn-sm {
    --bs-btn-padding-x: .625rem;
    --bs-btn-padding-y: .825rem;
    --bs-btn-font-size: .875rem;
    --bs-btn-line-height: 1rem
  }

  /* banner  */
  .main-banner.home .slider_row {
    padding-block: 4rem;
  }

  #home-hero .banner_icon {
    width: 100px
  }

  #home-hero .banner_icon.bi_1 {
    top: 10rem;
    right: 26rem;
  }

  #home-hero .banner_icon.bi_2 {
    top: 1rem;
    right: 18rem;
  }

  #home-hero .banner_icon.bi_3 {
    top: 3rem;
    right: 9rem;
  }

  #home-hero .banner_icon.bi_4 {
    top: 11rem;
    right: 2rem;
  }

  .piller .icon-box {
    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important
  }

  .benifit-card {
    background-repeat: no-repeat;
    min-height: 300px
  }

  .hiw-rail {
    top: clamp(11px, 24vw, 267px)
  }

  .try-challenges img {
    max-width: 120%;
    height: auto;
    margin-left: -111px
  }

  .card.bf_4 .card-img img {
    top: auto !important;
    bottom: 0
  }

  .card.bf_1 .card-img img {
    right: 0;
    top: 50%
  }

  .client {
    background-position: 67%
  }

  .timing_list.fs-17 {
    font-size: 14px
  }

  .db-nav1.navbar-nav {
    --bs-nav-link-padding-x: .2375rem
  }

  .navbar-nav.db-nav {
    --bs-nav-link-font-size: .8rem
  }

  .db-nav.navbar-nav .nav-link {
    gap: 4px
  }

  .db-nav.navbar-nav .nav-link svg {
    width: 18px;
    height: 18px
  }

  .vera__week .row {
    --bs-gutter-x: 34px !important;
  }

  .user_thumb.thumb1 {
    top: 5rem;
  }

  .user_thumb.thumb2 {
    right: 4rem;
    top: 4rem;
  }

  .user_thumb.thumb3 {
    bottom: 8rem;
    left: 5rem;
  }

  .user_thumb.thumb4 {
    right: 6rem;
    bottom: 10rem;
  }

  #home-hero .lix_main {
    right: -5rem;
    bottom: 0px;
    top: auto;
    height: 460px;
    object-fit: cover;
    object-position: top;
    width: 45rem;
    transform: scale(1.3);
  }
}

@media(min-width:768px) {
  @keyframes animate-pulse {
    0% {
      box-shadow: 0 0 0 0 var(--skyblue-20), 0 0 0 0 var(--skyblue-20)
    }

    40% {
      box-shadow: 0 0 0 20px var(--skyblue-20), 0 0 0 0 var(--skyblue-20)
    }

    80% {
      box-shadow: 0 0 0 20px var(--skyblue-0), 0 0 0 10px var(--skyblue-0)
    }

    100% {
      box-shadow: 0 0 0 0 var(--skyblue-0), 0 0 0 10px var(--skyblue-0)
    }
  }
}

@media(min-width:992px) {
  .level__offscreen {
    position: absolute;
    top: -1rem;
    right: 2.875rem;
    width: 81px;
    height: 225px;
    font-size: 187.392px;
    font-weight: 600;
    line-height: 225px;
    text-align: center;
    color: #52b8db1a
  }

  .card__switcher {
    padding-bottom: 3.75rem
  }
}

@media(min-width:1200px) {
  .__headBody .row {
    --bs-gutter-x: 3rem
  }

  .tooltip {
    --bs-tooltip-max-width: 18rem
  }

  .__blogWrapper .form-select {
    font-size: 20px;
    line-height: 57px;
    min-width: 150px;
    max-width: 174px;
    height: 57px;
    padding: 0 3.375rem 0 1.375rem
  }

  .__blogWrapper .form-select:where(#topic, #lang) {
    width: 174px
  }

  .__features .main-heading .fs-1 {
    font-size: 2.25rem !important
  }

  .card.post-card:hover {
    --bs-card-bg: #ff74000a
  }

  .hiw-grid {
    --bs-gutter-x: 9rem
  }
}

@media(min-width:1140px) {
  .try-challenges img {
    margin-left: -150px;
    scale: 1
  }
}

@media(min-width:1024px) {

  header {
    transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
    will-change: transform, background-color, box-shadow;
    backdrop-filter: saturate(1.1) blur(6px)
  }

  /* banner  */
  .faster_list li a.btn {
    flex: 0 0 auto;
    width: 32.333333%
  }

  /* footer  */
  .c_details.gap-lg-4 {
    column-gap: 2.5rem !important
  }

  /* footer desktop collapse handled via d-lg-block in HTML */
}

@media (max-width: 991px) {
  .desktop-auth {
    display: none
  }

  .hero-swiper .btn-group {
    width: fit-content
  }

  .hiw-rail {
    display: none
  }

  .btn-group,
  .btn-group-vertical {
    flex-direction: column
  }

  .custom-search.search-wrapper {
    width: 100%
  }

  .custom-search.search-wrapper input {
    flex: 0 0 100%;
    max-width: 100%
  }

  .custom-search.search-wrapper input:focus {
    padding: 8px;
    width: 100%
  }

  table.price__custom__table :is(thead, tbody) tr {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border: 0
  }

  table.price__custom__table thead tr th:first-child {
    border-width: 1px
  }

  table.price__custom__table thead tr th:nth-child(2) {
    border-width: 0 1px 1px !important
  }

  table.price__custom__table thead tr th:nth-child(3) {
    border-width: 0 1px 1px 0 !important
  }

  table.price__custom__table tbody tr td:nth-child(2) {
    border-width: 0 1px 1px 0
  }

  table.price__custom__table tbody tr td:nth-child(3) {
    border-width: 0 0 1px
  }

  table.price__custom__table tr :is(th, td):first-child {
    width: calc(100% / 1);
    max-width: calc(100% / 1);
    background-color: transparent;
    border-width: 0 0 1px
  }

  table.price__custom__table th .btn {
    --bs-btn-padding-x: 1.5rem
  }

  table.price__custom__table tr td:first-child {
    background-color: #f9f9f9
  }

  table.price__custom__table tr :is(th, td):not(:first-child) {
    width: calc(100% / 2);
    background-color: transparent
  }

  .account__plan__detail table thead tr th:first-child {
    display: flex;
    justify-content: space-between
  }

  table.price__custom__table .account__plan #saveBadge {
    top: 40px;
    right: 0 !important
  }

  .account__plan .card__wrapper .price__card {
    --bs-card-spacer-y: 2rem;
    --bs-card-spacer-x: 1.5rem
  }

  table.price__custom__table td,
  .accordion-button {
    font-size: 1.125rem
  }

  .accordion-body,
  table.price__custom__table :is(th, td):not(:first-child) {
    font-size: 1rem
  }

  .header-transparent {
    margin-bottom: -50px;
  }


  .navbar.header-navbar{--bs-navbar-nav-link-padding-x:0}

  .header_container {
    padding-inline: 10px
  }

  /* banner  */
  .main-banner.home .slider_row {
    padding-block: 4rem 30rem;
  }

  #home-hero .lix_main {
    top: 52%;
    right: 0
  }

  #home-hero .banner_icon {
    width: 87px
  }

  #home-hero .banner_icon.bi_1 {
    top: 610px;
    right: 570px
  }

  #home-hero .banner_icon.bi_2 {
    top: 420px;
    right: 500px
  }

  #home-hero .banner_icon.bi_3 {
    top: 400px;
    right: 250px
  }

  #home-hero .banner_icon.bi_4 {
    top: 550px;
    right: 120px
  }

  .btn.btn-md {
    --bs-btn-padding-x: 2.5rem;
    --bs-btn-padding-y: .9rem;
    --bs-btn-font-size: 1.2rem
  }

  /* mobile: stack items; hide rail */
  .hiw-rail {
    display: none
  }

  /* btn   */
  .btn-group {
    width: 100%
  }

  .btn {
    --bs-btn-padding-x: 1.2rem;
    --bs-btn-padding-y: .8rem;
    --bs-btn-font-size: 1rem
  }

  /* btn end  */
  .testislider {
    height: 450px
  }

  /* footer collapse icons handled by .footer-collapse-icon */

  /* banner  */
  .main-banner.inner {
    padding: 4rem 0 20rem
  }

  #course_list.main-banner .img_wrapper img {
    right: 0;
    height: auto;
    top: 60% !important
  }

  /* banner  */
  /* .auth-cta{display: none;} */
  /* .auth-cta-m{display: none;} */
  .desktop-login .auth-cta {
    display: none
  }

  .hiw-rail {
    display: none
  }

  .hiw-icon img {
    width: 50px
  }

  .card.testi_card .card-body {
    padding-right: 16px;
    gap: .6875rem;
    flex-direction: column
  }

  .card.testi_card .card-body .card-text {
    height: 100%
  }

  .benifit-card.bf_4 {
    min-height: 550px
  }

  .benifit-card {
    min-height: 380px
  }

  .card.testi_card .card-icon {
    margin-top: 0;
    display: none
  }

  .test-seciotn h2 {
    font-size: calc(2.475rem + .3vw)
  }

  .user_thumb {
    width: 50px
  }

  .user_thumb.thumb2 {
    right: 4%;
    top: 12%
  }

  .user_thumb.thumb3 {
    top: 137px
  }

  .cta-box img {
    width: 100px
  }

  .form-select.r-filter {
    width: 50%;
    margin-bottom: 15px;
    padding: 1rem;
    font-size: 1rem
  }

  .smltr-filter .form-select.r-filter {
    width: 100%;
    margin-bottom: 15px;
    padding: 1rem;
    font-size: 1rem
  }

  .meta_box {
    padding: 9px 10px
  }

  .meta_box img {
    width: 15px
  }

  .meta_box h5 {
    font-size: 16px
  }

  .meta_box span {
    font-size: 12px;
    display: block
  }

  .footer-login-btn {
    min-width: 170px;
    padding: 12px 36px !important;
    font-size: 15px !important;
  }

  .blog__detail__content .breadcrumb .breadcrumb-item.active {
    display: none !important
  }

  .blog__detail__content .blog_detail_meta * {
    font-size: 13px !important
  }

  .blog__detail__content .cat-chip {
    font-size: 12px !important
  }

  .blog__detail__content .page__content :is(h2):not(.blog_level_cta h2, .alert__box h2) {
    font-size: calc(2.125rem - 2vw)
  }

  .blog__detail__content .page__content :is(h3):not(.blog_level_cta h3, .alert__box h3) {
    font-size: calc(2rem - 2vw)
  }

  .blog__detail__content .page__content :is(h4):not(.blog_level_cta h4, .alert__box h4) {
    font-size: calc(1.75rem - 2vw)
  }

  .blog__detail__content .page__content :is(h5):not(.blog_level_cta h5, .alert__box h5) {
    font-size: calc(1.5rem - 2vw)
  }

  .blog__detail__content .page__content :is(h6):not(.blog_level_cta h6, .alert__box h6) {
    font-size: calc(1.25rem - 2vw)
  }

  .blog_level_cta {
    --py: 24px;
    --px: 22px;
    padding: 24px 22px !important
  }

  .__headBody .row {
    --bs-gutter-y: 1.5rem
  }

  .card.post-card,
  .card.post-card.big,
  .__recentArticles .card.post-card {
    --bs-card-spacer-y: 1.375rem;
    --bs-card-spacer-x: 1rem
  }

  .card.post-card:not(.big) .card-body .__wrap {
    flex-direction: column
  }

  .card.post-card:not(.big) ._media {
    width: 100%;
    min-height: 180px;
    max-height: 180px;
    overflow: hidden
  }

  .card.post-card.big ._media {
    width: 100%;
    min-height: 200px;
    max-height: 200px;
    overflow: hidden
  }

  .card.post-card.big .card-title {
    max-height: 52px;
    line-height: 1.025
  }

  .__header .search-wrapper .dropdown .btn.search_icon {
    height: 36px;
    width: 36px;
    padding: 0 !important
  }

  .__header .search-wrapper .dropdown .btn.search_icon svg {
    height: 20px;
    width: 20px
  }

  .__blogWrapper .cat-chip,
  .blog__detail__content .cat-chip {
    height: auto;
    padding-block: 4px
  }

  .card.post-card ._meta * {
    font-size: 12px
  }

  .filter-bar .search-wrapper .dropdown .dropdown-menu.dropdown-menu-end {
    width: 88% !important
  }

  .__blogWrapper .__header {
    padding-top: 0
  }

  .__cta .card {
    --bs-card-spacer-y: 1.375rem;
    --bs-card-spacer-x: 1.375rem
  }

  .card.post-card:not(.big) .card-title {
    line-height: 1.375;
    font-size: 19px !important;
    max-height: 54px;
    overflow: hidden
  }

  .__blogWrapper .form-select:where(#topic) {
    width: 180px;
    max-width: 250px
  }

  .dashboard-grid {
    grid-template-columns: 1fr
  }

  .widget-col {
    order: 2
  }

  .dashboard-container {
    padding: 24px 20px 60px
  }

  .vera__week .row {
    --bs-gutter-y: 30px;
  }

  .nav-links,
  .stat-pills {
    display: none
  }

  .mobile-toggle {
    display: block
  }

  .topnav-inner {
    padding: 0 20px;
    height: 64px
  }
}

@media (max-width: 768px) {
  .account__plan__detail table thead tr th:first-child {
    flex-direction: column;
    align-items: center
  }

  .account__plan__detail table .btn.btn-md {
    --bs-btn-padding-x: 22px;
    --bs-btn-padding-y: 7px;
    --bs-btn-font-size: 18px
  }

  .account__plan .card__wrapper .price__card {
    --bs-card-spacer-y: 2.8rem;
    --bs-card-spacer-x: 1.5rem
  }

  .account__plan .card__wrapper .price__card.price__premium .badge {
    --bs-badge-padding-x: .875rem;
    --bs-badge-padding-y: .5375rem;
    --bs-badge-font-size: 1.05rem;
    margin: 10px
  }

  .trader-growth-system .card__box .col-lg-7 {
    border: 1px solid #DBE4E8 !important;
    border-radius: 20px 20px 0px 0px !important;
    border-bottom: 0px !important;
  }

  .main-banner .img_wrapper img {
    object-fit: none;
    width: 85%;
    right: 0;
    top: auto;
    bottom: 0;
    height: 620px;
    left: 0;
    margin: auto;
  }

  #home-hero .lix_main {
    height: 410px;
    transform: scale(1.18);
  }

  #home-hero .banner_icon {
    width: 130px;
  }

  #home-hero .banner_icon.bi_1 {
    top: 480px;
    right: 520px;
  }

  #home-hero .banner_icon.bi_2 {
    top: 390px;
    right: 390px;
  }

  #home-hero .banner_icon.bi_3 {
    top: 430px;
    right: 240px;
  }

  #home-hero .banner_icon.bi_4 {
    top: 540px;
    right: 120px;
  }

  .main-banner.home .slider_row {
    padding-block: 4rem 32rem;
  }

  .never__learn__alone .img-wrp .small {
    width: 28.125rem;
  }

  .user_thumb.thumb1 {
    top: 1rem;
    left: 2rem;
  }

  .user_thumb.thumb2 {
    right: 0rem;
    top: 6rem;
  }

  .user_thumb.thumb3 {
    top: 15rem;
    left: 4rem;
  }

  .user_thumb.thumb4 {
    right: 5rem;
    bottom: 16rem;
  }
}

@media(max-width:767px) {

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    --bs-gutter-x: 2rem !important
  }

  .container-fluid {
    --bs-gutter-x: 0 !important
  }

  .site-header .container-fluid {
    padding-inline: .5rem !important;
    padding-block: .375rem !important
  }

  .site-header .btn {
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: .375rem;
    --bs-btn-font-size: .875rem
  }

  /* font-size for course listing page */
  .course__header .display-5 {
    font-size: calc(1.425rem + 2vw)
  }

  .course__header p.fs-4 {
    font-size: 1.125rem !important;
    line-height: 1.2
  }

  .course__body .fs-22 {
    font-size: clamp(1.125rem, 2vw, 1.375rem)
  }

  .course__body .avatar {
    max-width: 50%
  }

  .course__body .btn.btn-sm {
    --bs-btn-padding-x: .625rem;
    --bs-btn-padding-y: .5rem;
    --bs-btn-font-size: .875rem;
    --bs-btn-line-height: calc(var(--bs-btn-font-size) + .125rem)
  }

  .course__body ._resume-inline {
    display: none !important
  }

  .badge.badge-small {
    --bs-badge-padding-x: .75rem;
    --bs-badge-padding-y: .375rem;
    --bs-badge-font-size: .75rem
  }

  ul.list-compact {
    padding: 1rem 0 0 2rem
  }

  .course__body ul.list-compact {
    padding: .25rem 2rem
  }

  .courseRowsWrap .list-compact .list-group-item,
  .left-border-tab li {
    padding: .25rem 0 1.5rem 1.75rem
  }

  .__lesson_view .container-fluid.container-lg .row nav {
    margin-top: -8px;
    margin-bottom: -4px
  }

  .legal-page p {
    font-size: 1rem;
    line-height: 20px
  }

  /* courses */
  .__mobile .card .badge.badge-small {
    --bs-badge-font-size: .875rem
  }

  .__mobile .card .badge.badge-white {
    --bs-badge-color: #12244C;
    background-color: #52b8db33
  }

  .__mobile .card .card-title {
    font-size: 1.5rem
  }

  .custom-list.list-compact li::before,
  .custom-list.list-compact li::after {
    height: 2rem;
    width: 2rem;
    left: -1rem;
    background-size: 1.25rem
  }

  .custom-list.list-compact li.locked-lesson::before {
    background-size: 1.5rem
  }

  .custom-list.list-compact li::before {
    top: -2px
  }

  .custom-list.list-compact li::after {
    top: 3px
  }

  .custom-list.list-compact li:active::before {
    top: 1px
  }

  @keyframes animate-pulse {
    0% {
      box-shadow: 0 0 0 0 var(--skyblue-20), 0 0 0 0 var(--skyblue-20)
    }

    40% {
      box-shadow: 0 0 0 10px var(--skyblue-20), 0 0 0 0 var(--skyblue-20)
    }

    80% {
      box-shadow: 0 0 0 10px var(--skyblue-0), 0 0 0 10px var(--skyblue-0)
    }

    100% {
      box-shadow: 0 0 0 0 var(--skyblue-0), 0 0 0 10px var(--skyblue-0)
    }
  }

  .__lesson_view .container-fluid.container-lg {
    --bs-gutter-x: 0 !important
  }

  .__lesson_view .container-fluid.container-lg .row nav,
  .__lesson_view .__lesson_view_content .section:not(.banner_card):not(.__syllabus_head):not(.courseRowsWrap) {
    padding-inline: 1.625rem
  }

  .card.banner_card {
    --bs-card-spacer-y: 2.125rem;
    --bs-card-spacer-x: 1.5rem;
    --bs-card-border-radius: 0;
    --bs-card-border-width: 0
  }

  .badge {
    --bs-badge-padding-x: .75rem;
    --bs-badge-padding-y: .375rem;
    --bs-badge-font-size: .875rem
  }

  .gap-13 {
    gap: .75rem
  }

  .__lesson_view p {
    line-height: 1.2
  }

  .__lesson_view .sp_heading {
    color: #3F2314 !important;
    font-size: 26px;
    line-height: 36px
  }

  .__lesson_view .__syllabus_head .main-heading {
    border-radius: 0 !important
  }

  .__lesson_view .__syllabus_head .main-heading .sp_heading {
    font-size: 24px;
    line-height: 34px
  }

  .__lesson_view .__syllabus_head .main-heading p {
    font-size: 18px !important;
    line-height: 31px !important
  }

  .__lesson_view .what-will-learn .icon-box {
    border-right: 0 !important
  }

  .__lesson_view .what-will-learn .icon-box .fs-18 {
    font-size: 18px !important
  }

  .tool-box .tool-text h3.fs-3 {
    font-size: 1.125rem !important;
    line-height: 1.75rem !important
  }

  .tool-icon img {
    width: 60px;
    height: 60px
  }

  /* .cs-dropdown{position:fixed;inset:0;background:rgba(0,0,0,0.4);display:flex;align-items:flex-end;justify-content:center;pointer-events:none;} */
  .cs-wrapper.open .cs-dropdown {
    pointer-events: auto;
  }

  .cs-dropdown-inner {
    width: 100%;
    max-height: 80vh;
    /*border-radius:20px 20px 0 0;transform:translateY(100%);*/
    transition: transform .35s ease;
    opacity: 1;
  }

  .cs-wrapper.open .cs-dropdown-inner {
    /*transform:translateY(0);*/
  }

  .__body .fs-4 {
    font-size: calc(1rem + .2vw) !important;
  }

  .__body .fs-4:where(.large-value, .result-value) {
    font-size: calc(1.25rem + .2vw) !important;
  }

  .intel-community-row {
    grid-template-columns: 1fr
  }
}

@media(max-width: 600px) {
  .result__score {
    padding-bottom: 140px !important
  }

  .speech__box::before {
    top: -16%;
    transform: rotate(90deg);
    left: 1rem
  }

  .tgs-tabs-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .tgs-tabs-wrapper::-webkit-scrollbar {
    display: none;
  }

  .tgs-tab-btn {
    padding: 8px 5px !important;
    font-size: 14px !important;
    gap: 6px;
  }

  .tgs-icon-box {
    width: 33px;
    height: 33px;
  }

  .tgs-icon-box svg {
    width: 33px;
    height: 33px;
  }

  .btn.btn-sm {
    --bs-btn-padding-x: .925rem;
    --bs-btn-padding-y: .725rem
  }

  /* banner  */
  .main-banner.home .slider_row {
    padding: 7rem 0 16.625rem
  }

  #home-hero .banner_icon {
    width: 87px
  }

  #home-hero .banner_icon.bi_1 {
    top: 33rem;
    right: 20rem;
  }

  #home-hero .banner_icon.bi_2 {
    top: 26rem;
    right: 14rem;
  }

  #home-hero .banner_icon.bi_3 {
    top: 27rem;
    right: 7rem;
  }

  #home-hero .banner_icon.bi_4 {
    top: 32rem;
    right: 2rem;
  }

  .hiw-icon {
    display: block;
    margin-bottom: 15px
  }

  p.desc,
  ul.fs-4 {
    font-size: calc(1rem + .2vw) !important
  }

  .try-challenges .custom-list li {
    margin-bottom: 1.375rem;
    padding-left: 30px
  }

  .try-challenges .custom-list li:before {
    width: 22px;
    height: 22px
  }

  .card.p_card-2 {
    --bs-card-spacer-x: 1rem;
    min-height: 350px
  }

  .benifit-card {
    min-height: 320px;
    --bs-card-spacer-x: 1rem
  }

  .card.lix-card {
    background-position: right
  }

  #ad-sidebar img {
    width: 100%
  }

  ul.list-compact {
    padding-bottom: 0
  }

  #home-hero .lix_main {
    height: 300px;
    transform: scale(1.68);
    top: auto;
    bottom: 0;
  }

  .main-banner.home .slider_row {
    padding-block: 4rem 28rem;
  }

  .tgs-nav {
    gap: 0px;
  }

  .never__learn__alone .img-wrp {
    margin-bottom: -20px;
  }

  .never__learn__alone .img-wrp .small {
    width: 80%;
  }

  .account__plan .card__wrapper .price__card.price__premium {
    margin-left: 0px;
    margin-top: 20px;
    height: auto !important;
  }

  .user_thumb {
    width: 60px !important;
    position: static;
    margin-inline: -5px;
  }

  .main_cta .cta-card {
    padding: 50px 20px;
  }

  .vera__week .card .btn_grp a {
    padding: 8px 20px;
    font-size: 20px;
  }

  .latest__week__side .news__item .news__item__title {
    font-size: 18px !important;
  }

  .trader-growth-system .card__box .bullet__list p {
    font-size: 18px !important;
  }

  .never__learn__alone .content-wrp p {
    font-size: 18px !important;
  }

  .swiper-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin-inline: 5px !important;
  }
}

@media (max-width: 575px) {
  .hero-drill {
    padding: 28px 24px
  }

  .hero-drill h2 {
    font-size: 24px
  }

  .btn-jelly {
    padding: 14px 28px;
    font-size: 15px
  }

  .card-v32 {
    padding: 24px
  }
}

@media(max-width: 414px) {
  .quiz__QA {
    padding-bottom: 200px !important
  }

  .opt {
    font-size: 14px;
    padding: 10px 15px
  }

  .opt:after {
    top: 25%;
    right: 10px;
    width: 20px;
    height: 20px
  }

  .thread-title .tread-link:hover {
    color: var(--bs-primary)
  }

  .thread-desc {
    color: var(--feed-text-desc)
  }

  .thread-box a {
    color: var(--feed-text-link)
  }

  article.thread-box {
    border: 0;
    border-bottom: 1.5px solid #f6f7f9;
    transition: all .2s ease-in-out
  }

  article.thread-box:hover {
    background-color: #F6F7F9
  }

  .quick-links li {
    margin-bottom: 6px
  }

  .cs-field {
    width: 100%
  }
}
/* The original marketing tab component controls typography and spacing. */
.practice-products__intro{max-width:760px}

/* Homepage hierarchy polish: preserve the established layout and visual language. */
#home-hero .swiper-slide {
  height: auto;
}

#home-hero .slider_row {
  position: relative;
  z-index: 2;
}

#home-hero .main-heading > span {
  letter-spacing: .015em;
}

#home-hero .main-heading :is(h1, h2) {
  max-width: 760px;
  color: #262523;
  font-size: clamp(50px, 4vw, 60px);
  letter-spacing: -.032em;
  line-height: 1.13 !important;
}

#home-hero .main-heading p {
  max-width: 720px;
  color: #595754 !important;
  opacity: 1 !important;
  line-height: 1.55;
}

#home-hero .home-hero__product-visual {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 500px;
  align-items: center;
  justify-content: center;
}

#home-hero .home-hero__product-art {
  position: static;
  display: block;
  width: min(100%, 720px);
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 24px 34px rgba(32, 47, 62, .14));
}

#home-hero .home-hero__product-visual--lab .home-hero__product-art {
  width: min(110%, 760px);
}

#home-hero .home-hero__product-visual--battle .home-hero__product-art {
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 26px 55px rgba(20, 43, 67, .16);
  filter: none;
}

#home-hero .home-hero__pagination {
  bottom: 28px;
  z-index: 4;
}

#home-hero .home-hero__pagination .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  margin: 0 6px !important;
  background: rgba(39, 45, 50, .28);
  transition: width .2s ease, background-color .2s ease;
}

#home-hero .home-hero__pagination .swiper-pagination-bullet-active {
  width: 28px;
  border-radius: 99px;
  background: var(--bs-primary);
}

#practice-products .practice-products__intro > span {
  font-size: 14px;
  letter-spacing: .055em;
  text-transform: uppercase;
}

#practice-products .practice-products__intro h2 {
  color: #22211f !important;
  letter-spacing: -.028em;
  line-height: 1.12;
}

#practice-products .practice-products__intro p {
  max-width: 720px;
  margin-inline: auto;
  color: #65625f !important;
  line-height: 1.55;
}

#practice-products .tgs-tab-btn {
  font-size: 22px !important;
  letter-spacing: -.012em;
}

#practice-products .practice-products__eyebrow {
  font-size: 13px !important;
  letter-spacing: .06em;
}

#practice-products .practice-products__title {
  color: #142347 !important;
  font-size: clamp(30px, 2.3vw, 40px) !important;
  letter-spacing: -.028em;
  line-height: 1.18;
}

#practice-products .practice-products__lead {
  max-width: 720px;
  color: #65625f !important;
  font-size: 18px !important;
  line-height: 1.58;
}

#practice-products .practice-products__point {
  color: #65625f !important;
  font-size: 17px !important;
  line-height: 1.55;
}

.vera__week .vera__week__heading {
  max-width: 760px;
  margin-inline: auto;
}

.vera__week .vera__week__title {
  letter-spacing: -.032em;
  line-height: 1.08;
}

.vera__week .vera__week__subtitle {
  color: #66635f !important;
  font-size: 19px !important;
  line-height: 1.5;
}

.vera__week .vera__week__feature {
  box-shadow: 0 18px 48px rgba(25, 34, 43, .055);
}

.vera__week .vera__week__feature .card-title {
  color: #252422 !important;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.vera__week .vera__week__summary {
  color: #4f4d4a !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
}

.vera__week .vera__week__latest > h3 {
  color: #252422 !important;
  font-size: 27px !important;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.vera__week .news__item {
  border-color: #dfe3e6 !important;
}

.vera__week .news__item__title {
  color: #343230 !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: -.008em;
  line-height: 1.45 !important;
  transition: color .2s ease;
}

.vera__week .news__item a:hover .news__item__title {
  color: var(--bs-primary) !important;
}

@media (min-width: 992px) {
  #home-hero .home-hero__product-slide .slider_row {
    min-height: 725px;
    padding-block: 82px 112px;
  }
}

@media (max-width: 991px) {
  #home-hero .home-hero__product-slide .slider_row {
    padding-block: 58px 84px;
  }

  #home-hero .home-hero__product-visual {
    min-height: 330px;
  }

  #home-hero .home-hero__product-art {
    position: static;
    width: min(88vw, 650px);
    height: auto;
    object-fit: contain;
  }

  #practice-products .practice-products__title {
    font-size: 30px !important;
  }
}

@media (max-width: 767px) {
  #home-hero .btn-group {
    width: 100%;
    flex-direction: column !important;
  }

  #home-hero .btn-group .btn {
    width: 100%;
  }

  #home-hero .main-heading > span {
    padding-bottom: 14px !important;
    font-size: 14px !important;
  }

  #home-hero .main-heading :is(h1, h2) {
    margin-bottom: 18px !important;
    font-size: clamp(36px, 10.2vw, 48px);
    line-height: 1.08 !important;
  }

  #home-hero .main-heading p {
    font-size: 17px !important;
    line-height: 1.52;
  }

  #home-hero .home-hero__product-slide .slider_row {
    padding: 48px 0 76px;
  }

  #home-hero .home-hero__product-visual {
    min-height: 255px;
    margin-top: 8px;
  }

  #home-hero .home-hero__product-art,
  #home-hero .home-hero__product-visual--lab .home-hero__product-art {
    position: static;
    right: auto;
    bottom: auto;
    left: auto;
    width: min(94vw, 540px);
    height: auto;
    margin: 0 auto;
    transform: none;
    object-fit: contain;
  }

  #home-hero .home-hero__product-visual--battle .home-hero__product-art {
    border-radius: 18px;
  }

  #home-hero .home-hero__pagination {
    bottom: 18px;
  }

  #practice-products .practice-products__intro > span {
    font-size: 12px;
  }

  #practice-products .practice-products__intro h2 {
    font-size: 32px;
  }

  #practice-products .practice-products__intro p {
    font-size: 17px !important;
  }

  #practice-products .practice-products__title {
    font-size: 28px !important;
    line-height: 1.2;
  }

  #practice-products .practice-products__lead,
  #practice-products .practice-products__point {
    font-size: 16px !important;
  }

  .vera__week .vera__week__title {
    font-size: 36px;
  }

  .vera__week .vera__week__subtitle {
    font-size: 17px !important;
  }

  .vera__week .vera__week__latest > h3 {
    font-size: 24px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #home-hero .home-hero__pagination .swiper-pagination-bullet {
    transition: none;
  }
}

/* Practice product tabs: a calmer, more tactile card treatment without changing the component structure. */
#practice-products {
  background: linear-gradient(180deg, #fff 0%, #f9fbfc 100%) !important;
}

#practice-products .tgs-tabs-wrapper {
  max-width: 980px;
  margin-inline: auto;
}

#practice-products .tgs-nav {
  gap: clamp(28px, 5vw, 72px);
}

#practice-products .tgs-tab-btn {
  padding: 14px 4px 18px !important;
  color: #5e646c !important;
  font-weight: 500 !important;
  transition: color .22s ease, transform .22s ease;
}

#practice-products .tgs-tab-btn:hover,
#practice-products .tgs-tab-btn:focus-visible {
  color: #12244c !important;
  transform: translateY(-1px);
}

#practice-products .tgs-tab-btn.active {
  color: #12244c !important;
  font-weight: 600 !important;
}

#practice-products .tgs-icon-box {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 17px;
  transition: background-color .22s ease, box-shadow .22s ease;
}

#practice-products .tgs-tab-btn.active .tgs-icon-box {
  background: rgba(82, 184, 219, .10);
  box-shadow: 0 8px 20px rgba(29, 89, 124, .10);
}

#practice-products .tgs-underline {
  height: 3px;
  box-shadow: 0 -1px 8px rgba(18, 36, 76, .16);
}

#practice-products .practice-products__card {
  border-radius: 24px !important;
  box-shadow: 0 20px 55px rgba(20, 43, 67, .08);
}

#practice-products .practice-products__panel {
  min-height: 510px;
  overflow: hidden;
  background: #fff;
}

#practice-products .practice-products__content {
  position: relative;
  display: flex;
  align-items: center;
  border-color: #dce5e9 !important;
  background: linear-gradient(135deg, #fff 0%, #fff 72%, #fbfdfe 100%);
}

#practice-products .practice-products__content::before {
  position: absolute;
  top: 42px;
  bottom: 42px;
  left: 0;
  width: 4px;
  border-radius: 0 8px 8px 0;
  background: #ff6900;
  content: '';
}

#practice-products .practice-products__content .content-wrp {
  position: relative;
  width: 100%;
  padding-left: clamp(2rem, 4.1vw, 4.5rem) !important;
  padding-right: clamp(2rem, 4.1vw, 4.5rem) !important;
}

#practice-products .practice-products__eyebrow {
  font-weight: 600 !important;
}

#practice-products .practice-products__title {
  font-weight: 600 !important;
}

#practice-products .practice-products__lead {
  max-width: 620px;
}

#practice-products .practice-products__bullet {
  max-width: 670px;
}

#practice-products .practice-products__bullet svg {
  flex: 0 0 26px;
  margin-top: 7px;
}

#practice-products .practice-products__actions {
  padding-top: 4px;
}

#practice-products .practice-products__cta {
  min-width: 205px;
  font-weight: 600 !important;
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease;
}

#practice-products .practice-products__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(255, 105, 0, .16);
}

#practice-products .practice-products__visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(145deg, #eef8fb 0%, #e1f1f7 100%) !important;
}

#practice-products .practice-products__visual::before,
#practice-products .practice-products__visual::after {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: rgba(82, 184, 219, .18);
  content: '';
}

#practice-products .practice-products__visual::before {
  width: 340px;
  height: 340px;
  top: -150px;
  right: -130px;
}

#practice-products .practice-products__visual::after {
  width: 220px;
  height: 220px;
  bottom: -110px;
  left: -100px;
  background: rgba(255, 105, 0, .10);
}

#practice-products .practice-products__visual .img-wrp {
  position: relative;
  z-index: 1;
  width: min(100%, 540px);
}

#practice-products .practice-products__image {
  filter: drop-shadow(0 24px 24px rgba(24, 66, 88, .17));
  transition: transform .35s ease;
}

#practice-products .practice-products__card:hover .practice-products__image {
  transform: translateY(-5px) scale(1.01);
}

@media (max-width: 991px) {
  #practice-products .practice-products__panel { min-height: 0; }

  #practice-products .practice-products__content {
    min-height: 430px;
    border-right: 1px solid #dce5e9 !important;
    border-bottom: 0 !important;
    border-radius: 24px 24px 0 0 !important;
  }

  #practice-products .practice-products__visual {
    min-height: 350px;
    border-radius: 0 0 24px 24px;
  }
}

@media (max-width: 600px) {
  #practice-products .tgs-nav { gap: 14px; }

  #practice-products .tgs-tab-btn {
    padding: 10px 4px 14px !important;
    font-size: 14px !important;
  }

  #practice-products .tgs-icon-box {
    width: 34px;
    height: 34px;
    border-radius: 11px;
  }

  #practice-products .practice-products__content {
    min-height: 0;
  }

  #practice-products .practice-products__content::before {
    top: 28px;
    bottom: 28px;
    width: 3px;
  }

  #practice-products .practice-products__content .content-wrp {
    padding-left: 2rem !important;
    padding-right: 1.25rem !important;
  }

  #practice-products .practice-products__cta {
    width: 100%;
  }

  #practice-products .practice-products__visual {
    min-height: 280px;
  }

  #practice-products .practice-products__card:hover .practice-products__image {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #practice-products .tgs-tab-btn,
  #practice-products .practice-products__cta,
  #practice-products .practice-products__image {
    transition: none;
  }
}