:root {
  --black: #070707;
  --black-2: #111111;
  --orange: #f58a00;
  --orange-2: #ff9d1f;
  --gold: #d79a32;
  --cream: #fbf7f0;
  --cream-2: #f5eee5;
  --text: #25211d;
  --muted: #746c63;
  --line: rgba(224, 162, 76, .42);
  --shadow: 0 12px 28px rgba(54, 37, 18, .10);
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--black);
  font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
  color: var(--text);
  line-height: 1.8
}

img {
  display: block;
  max-width: 100%
}

a {
  text-decoration: none
}

button,
a {
  transition: .25s ease
}

.container-xxl {
  max-width: 1320px
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 45px;
  padding: .72rem 1.45rem;
  border-radius: 8px;
  font-weight: 800
}

.btn-orange {
  color: #fff;
  border: 1px solid #ffab37;
  background: linear-gradient(135deg, #ff9f1f, #e87500);
  box-shadow: 0 8px 24px rgba(242, 131, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .32)
}

.btn-orange:hover {
  color: #fff;
  transform: translateY(-2px);
  background: linear-gradient(135deg, #ffad33, #ef7d00)
}

.btn-dark-outline {
  color: #fff;
  border: 1px solid rgba(221, 158, 54, .72);
  background: rgba(255, 255, 255, .02)
}

.btn-dark-outline:hover {
  color: #fff;
  background: rgba(245, 138, 0, .11);
  border-color: var(--orange)
}

/* ============================================
   SITE HEADER & NAVIGATION
   ============================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: linear-gradient(180deg, rgba(6, 6, 6, .92) 0%, rgba(6, 6, 6, .78) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  transition: background .35s ease, box-shadow .35s ease, border-color .35s ease
}

.site-header.is-scrolled {
  background: rgba(5, 5, 5, .96);
  border-bottom-color: rgba(245, 138, 0, .18);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .45), 0 1px 0 rgba(245, 138, 0, .08) inset
}

.chm-nav {
  padding: 0
}

.chm-nav__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 76px
}

.chm-nav__brand {
  flex-shrink: 0;
  width: 142px;
  margin: 0;
  padding: 0;
  z-index: 2;
  text-decoration: none
}

.chm-nav__brand.active {
  opacity: 1
}

.chm-nav__brand img {
  width: 100%;
  height: 50px;
  object-fit: contain;
  object-position: right center;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .35))
}

.chm-nav__panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem
}

.chm-nav__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  margin: 0;
  padding: 0
}

.chm-nav__links .nav-link {
  position: relative;
  color: rgba(255, 255, 255, .82);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .01em;
  padding: .55rem .95rem;
  border-radius: 999px;
  white-space: nowrap
}

.chm-nav__links .nav-link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, .04);
  opacity: 0;
  transition: opacity .25s ease
}

.chm-nav__links .nav-link:hover {
  color: #fff
}

.chm-nav__links .nav-link:hover::before {
  opacity: 1
}

.chm-nav__links .nav-link.active {
  color: var(--orange)
}

.chm-nav__links .nav-link.active::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--orange), var(--orange-2));
  transform: translateX(-50%);
  box-shadow: 0 0 12px rgba(245, 138, 0, .55)
}

.chm-nav__dropdown .dropdown-toggle::after {
  margin-right: .35rem;
  vertical-align: .15em;
  border-top-color: rgba(255, 255, 255, .55);
  transition: transform .25s ease
}

.chm-nav__dropdown.show .dropdown-toggle::after {
  transform: rotate(180deg)
}

.chm-nav__dropdown-menu {
  margin-top: .65rem !important;
  padding: .5rem;
  background: rgba(14, 14, 14, .96);
  border: 1px solid rgba(245, 138, 0, .22);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04) inset;
  backdrop-filter: blur(16px);
  min-width: 240px;
  animation: chmDropdownIn .22s ease
}

@keyframes chmDropdownIn {
  from {
    opacity: 0;
    transform: translateY(8px)
  }

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

.chm-nav__dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: rgba(255, 255, 255, .88);
  font-size: .88rem;
  font-weight: 600;
  border-radius: 10px;
  padding: .65rem .75rem
}

.chm-nav__dropdown-menu .dropdown-item i {
  width: 1.1rem;
  color: var(--orange);
  font-size: 1rem;
  opacity: .9
}

.chm-nav__dropdown-menu .dropdown-item:hover,
.chm-nav__dropdown-menu .dropdown-item:focus {
  color: #fff;
  background: linear-gradient(90deg, rgba(245, 138, 0, .16), rgba(245, 138, 0, .06))
}

.chm-nav__actions {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-shrink: 0
}

.chm-nav__leading {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-shrink: 0
}

.chm-nav__cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255, 171, 55, .35);
  background: rgba(255, 171, 55, .08);
  color: #ffbf66;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease
}

.chm-nav__cart i {
  font-size: 1.15rem
}

.chm-nav__cart:hover,
.chm-nav__cart.active {
  color: #fff;
  border-color: rgba(255, 171, 55, .75);
  background: linear-gradient(135deg, rgba(255, 159, 31, .35), rgba(232, 117, 0, .22));
  box-shadow: 0 8px 22px rgba(242, 131, 0, .28);
  transform: translateY(-1px)
}

.chm-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 42px;
  padding: .55rem 1.1rem;
  border-radius: 999px;
  font-size: .86rem;
  font-weight: 800;
  white-space: nowrap;
  border: 1px solid transparent
}

.chm-nav__btn i {
  font-size: 1rem
}

.chm-nav__btn--primary {
  color: #fff;
  border-color: rgba(255, 171, 55, .65);
  background: linear-gradient(135deg, #ff9f1f 0%, #e87500 100%);
  box-shadow: 0 8px 22px rgba(242, 131, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .25)
}

.chm-nav__btn--primary:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(242, 131, 0, .34)
}

.chm-nav__btn--ghost {
  color: rgba(255, 255, 255, .92);
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .03)
}

.chm-nav__btn--ghost:hover {
  color: #fff;
  border-color: rgba(245, 138, 0, .45);
  background: rgba(245, 138, 0, .1)
}

.chm-nav__toggle {
  border: 0 !important;
  box-shadow: none !important;
  padding: .35rem;
  margin: 0
}

.chm-nav__toggle-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px;
  height: 28px
}

.chm-nav__toggle-box span {
  display: block;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--orange), var(--orange-2));
  transition: transform .28s ease, opacity .28s ease, width .28s ease
}

.chm-nav__toggle-box span:nth-child(2) {
  width: 78%
}

.chm-nav__toggle[aria-expanded="true"] .chm-nav__toggle-box span:nth-child(1) {
  transform: translateY(7px) rotate(45deg)
}

.chm-nav__toggle[aria-expanded="true"] .chm-nav__toggle-box span:nth-child(2) {
  opacity: 0;
  width: 0
}

.chm-nav__toggle[aria-expanded="true"] .chm-nav__toggle-box span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg)
}

/* Mobile menu drawer */
.chm-mobile-menu {
  --bs-offcanvas-width: min(360px, 92vw);
  background: linear-gradient(165deg, #101010 0%, #070707 48%, #0d0906 100%);
  color: #fff;
  border-left: 1px solid rgba(245, 138, 0, .12);
  transform: translateX(0) !important;
  transition: opacity .28s ease, visibility .28s ease !important
}

.chm-mobile-menu.offcanvas:not(.show) {
  opacity: 0;
  pointer-events: none
}

.chm-mobile-menu.offcanvas.show,
.chm-mobile-menu.offcanvas.showing {
  opacity: 1;
  pointer-events: auto
}

.offcanvas-backdrop {
  transition: opacity .28s ease !important
}

.chm-mobile-menu__header {
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .02)
}

.chm-mobile-menu__brand img {
  width: 128px;
  height: auto;
  max-height: 46px;
  object-fit: contain
}

.chm-mobile-menu__close {
  opacity: .75;
  box-shadow: none !important
}

.chm-mobile-menu__body {
  display: flex;
  flex-direction: column;
  padding: 1rem 1rem 1.25rem;
  gap: 1rem
}

.chm-mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 1
}

.chm-mobile-menu__link {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  color: rgba(255, 255, 255, .9);
  font-size: .95rem;
  font-weight: 700;
  border: 0;
  background: transparent;
  border-radius: 14px;
  padding: .85rem 1rem;
  text-align: right
}

.chm-mobile-menu__link i {
  width: 1.15rem;
  color: var(--orange);
  font-size: 1.05rem
}

.chm-mobile-menu__link:hover,
.chm-mobile-menu__link.is-active {
  color: #fff;
  background: rgba(245, 138, 0, .1)
}

.chm-mobile-menu__link.is-active {
  box-shadow: inset 3px 0 0 var(--orange)
}

.chm-mobile-menu__accordion {
  justify-content: space-between
}

.chm-mobile-menu__link-main {
  display: inline-flex;
  align-items: center;
  gap: .75rem
}

.chm-mobile-menu__chevron {
  color: rgba(255, 255, 255, .45);
  font-size: .85rem;
  transition: transform .25s ease
}

.chm-mobile-menu__accordion[aria-expanded="true"] .chm-mobile-menu__chevron {
  transform: rotate(180deg);
  color: var(--orange)
}

.chm-mobile-menu__sub {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  margin: .15rem .5rem .35rem 0;
  padding: .35rem .75rem .35rem 0;
  border-right: 2px solid rgba(245, 138, 0, .25)
}

.chm-mobile-menu__sub a {
  color: rgba(255, 255, 255, .72);
  font-size: .86rem;
  font-weight: 600;
  border-radius: 10px;
  padding: .55rem .85rem
}

.chm-mobile-menu__sub a:hover {
  color: #fff;
  background: rgba(255, 255, 255, .04)
}

.chm-mobile-menu__footer {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .07)
}

.chm-mobile-menu__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: 100%;
  min-height: 46px;
  border-radius: 14px;
  font-size: .92rem;
  font-weight: 800;
  border: 1px solid transparent
}

.chm-mobile-menu__btn--primary {
  color: #fff;
  border-color: rgba(255, 171, 55, .55);
  background: linear-gradient(135deg, #ff9f1f, #e87500);
  box-shadow: 0 10px 24px rgba(242, 131, 0, .24)
}

.chm-mobile-menu__btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .03)
}

@media (max-width:991.98px) {
  .chm-nav__container {
    min-height: 68px
  }

  .chm-nav__brand {
    width: 122px
  }

  .chm-nav__brand img {
    height: 44px
  }
}

@media (min-width:992px) {
  .chm-nav__toggle {
    display: none
  }
}

/* ============================================
   PAGE TRANSITIONS (fade instead of slide)
   ============================================ */

.page-transition {
  animation: pageFadeIn .32s ease forwards
}

@keyframes pageFadeIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes pageFadeOut {
  from {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

@supports (view-transition-name: none) {
  ::view-transition-old(root) {
    animation: pageFadeOut .22s ease forwards !important
  }

  ::view-transition-new(root) {
    animation: pageFadeIn .32s ease forwards !important
  }

  ::view-transition-group(root),
  ::view-transition-image-pair(root),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .32s !important
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-transition {
    animation: none
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important
  }
}

@media (max-width:1199.98px) and (min-width:992px) {
  .chm-nav__links .nav-link {
    padding-inline: .7rem;
    font-size: .86rem
  }

  .chm-nav__btn {
    padding-inline: .85rem;
    font-size: .82rem
  }
}

/* hero */
.hero {
  position: relative;
  background: #050505;
  overflow: hidden
}

.hero .row {
  min-height: 390px
}

.hero-content {
  position: relative;
  display: flex;
  align-items: center;
  color: #fff;
  background: radial-gradient(circle at 8% 65%, rgba(245, 138, 0, .13), transparent 36%), linear-gradient(90deg, #050505, #090909)
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 670px;
  margin-inline: auto;
  padding: 42px clamp(34px, 6vw, 88px) 42px 42px
}

.hero-eyebrow {
  display: block;
  color: var(--gold);
  font-size: .92rem;
  font-weight: 800;
  margin-bottom: .4rem
}

.hero h1 {
  font-weight: 900;
  line-height: 1.35;
  margin: 0 0 1rem;
  letter-spacing: -1.1px
}

.hero h1 em,
.hero h1 strong {
  color: var(--orange);
  font-style: normal;
  font-weight: 900
}

.hero p {
  max-width: 640px;
  color: rgba(255, 255, 255, .78);
  font-size: 1rem;
  margin: 0 0 1.55rem
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem
}

.hero-pattern {
  position: absolute;
  color: rgba(221, 154, 50, .6);
  pointer-events: none
}

.hero-pattern-dots {
  left: 6.5%;
  top: 34px;
  width: 62px;
  height: 86px;
  background: radial-gradient(circle, rgba(245, 138, 0, .92) 0 2px, transparent 2.6px) 0 0/15px 15px;
  opacity: .75
}

.hero-pattern-flower {
  left: 3%;
  bottom: 55px;
  font-size: 4.5rem;
  line-height: 1;
  opacity: .24
}

.hero-media {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  background: #000
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 64%, rgba(0, 0, 0, .82) 100%)
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center
}

.hero-seal {
  position: absolute;
  z-index: 2;
  left: 5%;
  top: 17%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 7px rgba(0, 0, 0, .28);
  mix-blend-mode: screen
}

/* cream page */
.light-page {
  position: relative;
  background: linear-gradient(180deg, #fbf8f3, #f8f2e9);
  border-top-right-radius: 48px;
  padding-top: 1px;
  overflow: hidden
}

.light-page::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  pointer-events: none;
  background-image: radial-gradient(rgba(182, 129, 60, .22) .6px, transparent .6px);
  background-size: 10px 10px
}

.light-page>section {
  position: relative;
  z-index: 1
}

.features {
  padding: 30px 0;
  background: linear-gradient(180deg, #fffaf5, #ffffff);
  position: relative;
  overflow: hidden;
}

.features::before {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  background: #ff7a00;
  opacity: .06;
  border-radius: 50%;
  right: -150px;
  top: -150px;
}

.feature-header {
  text-align: center;
  margin-bottom: 30px;
}

.feature-header span {
  color: #ff7a00;
  font-weight: 800;
  font-size: 18px;
}

.feature-header h2 {
  font-size: 38px;
  font-weight: 900;
  margin: 15px 0;
}

.feature-header p {
  color: #777;
  max-width: 600px;
  margin: auto;
}

.feature-card {
  position: relative;
  display: block;
  height: 100%;
  padding: 40px 25px;
  background: rgba(255, 255, 255, .75);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 122, 0, .12);
  border-radius: 30px;
  overflow: hidden;
  transition: .45s cubic-bezier(.4, 0, .2, 1);
}

.feature-card::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  background: #ff7a00;
  opacity: .08;
  border-radius: 50%;
  left: -40px;
  bottom: -40px;
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 60px rgba(255, 122, 0, .15);
}

.feature-card .icon {
  width: 75px;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  background: linear-gradient(135deg, #ff7a00, #ffad5a);
  margin-bottom: 25px;
  box-shadow: 0 15px 30px rgba(255, 122, 0, .25);
}

.feature-card .icon i {
  color: white;
  font-size: 30px;
}

.feature-card h4 {
  font-size: 22px;
  font-weight: 800;
  color: #222;
}

.feature-card p {
  color: #777;
  line-height: 2;
  min-height: 70px;
}

.feature-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ff7a00;
  font-weight: 700;
  margin-top: 20px;
}

.feature-link i {
  transition: .3s;
}

.feature-card:hover .feature-link i {
  transform: translateX(-5px);
}

/* titles */
.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 10px 0 18px
}

.section-title h2 {
  white-space: nowrap;
  font-size: 1.35rem;
  font-weight: 900;
  margin: 0;
  color: #211d19
}

.section-title span {
  width: 110px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--orange))
}

.section-title span:last-child {
  background: linear-gradient(90deg, var(--orange), transparent)
}

.section-title-small {
  margin-top: 0
}

.align-title-end {
  justify-content: flex-start;
  margin-bottom: 12px
}

.align-title-end span {
  width: 75px
}

/* courses */
.courses-section {
  padding: 50px 0;
  background: #faf7f1;
}

.courses-section__empty {
  margin: 0;
  text-align: center;
  color: #777;
  font-size: 15px;
}

.course-frame {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .34);
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .28)
}

.courses-wrapper {
  border: 1px solid rgba(214, 151, 62, .35);
  border-radius: 35px;
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .7), rgba(250, 240, 220, .4));
}

.course-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(218, 155, 62, .45);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(69, 44, 15, .10)
}

.course-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(100, 60, 10, .15);
}

.course-image {
  height: 155px;
  position: relative;
  overflow: hidden;
}

.course-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-image span {
  position: absolute;
  top: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  line-height: 1.2;
  white-space: nowrap;
  background: linear-gradient(135deg, #ffad24, #df7c00);
  color: white;
  padding: 8px 22px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 5px 15px rgba(255, 150, 0, .3);
}

.course-category-badge {
  z-index: 1;
  margin-right:8px;
}

.course-discount-badge {
  top: auto;
  bottom: 12px;
  left: 12px;
  right: auto;
  height: 30px;
  min-height: 30px;
  padding: 0 14px;
  background: linear-gradient(135deg, #e53935, #c62828) !important;
  box-shadow: 0 5px 15px rgba(229, 57, 53, .35);
  z-index: 1;
}

.course-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px 12px 12px;
  text-align: center;
}

.course-body h3 {
  font-size: 16px;
  font-weight: 900;
  margin: 0 0 6px;
  min-height: unset;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
}

.course-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-bottom: 6px;
  min-height: unset;
  margin-top:18px;
}

.course-price__regular {
  font-size: 15px;
  font-weight: 800;
  color: #333;
  line-height: 1.3;
}

.course-price__original {
  font-size: 13px;
  font-weight: 700;
  color: #d32f2f;
  text-decoration: line-through;
  line-height: 1.3;
}

.course-price__discounted {
  font-size: 15px;
  font-weight: 900;
  color: #2e7d32;
  line-height: 1.3;
}

.course-description-box {
  margin-top:6px;
  overflow: hidden;
}

.course-description-line {
  margin: 0;
  min-height: unset;
  color: #777;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.course-body .course-description {
  color: #777;
  font-size: 14px;
  line-height: 2;
  text-align: center;
}

.course-body .course-description p,
.course-body .course-description ul,
.course-body .course-description ol {
  margin: 0 0 .5rem;
}

.course-body .course-description p:last-child,
.course-body .course-description ul:last-child,
.course-body .course-description ol:last-child {
  margin-bottom: 0;
}

.course-body p {
  color: #777;
  font-size: 14px;
  line-height: 2;
  min-height: 55px;
}

.course-body .course-description-line {
  min-height: unset;
  line-height: 1.5;
  font-size: 13px;
}

.course-body .course-description p:last-child {
  margin-bottom: 0;
}

.course-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
  color: #777;
  font-size: 12px;
  line-height: 1.4;
  margin-top:30px;
}

.course-meta i {
  color: #e99022;
  margin-left: 5px;
}

.course-btn {
  margin-top: 18px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border: 1px solid #e8b36b;
  border-radius: 12px;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: .3s;
}

.course-btn:hover {
  background: #e99222;
  color: white;
}

.all-courses-btn-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

.all-courses-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 260px;
  height: 58px;
  background: linear-gradient(135deg, #181818, #050505);
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 800;
  border-radius: 35px;
  border: 1px solid #d99a35;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(218, 145, 35, .25);
  transition: .4s ease;
}

.all-courses-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 190, 70, .35), transparent);
  transition: .6s;
}

.all-courses-btn:hover::before {
  left: 100%;
}

.all-courses-btn span {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e99a25;
  color: #111;
  border-radius: 50%;
  transition: .3s;
}

.all-courses-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(220, 150, 40, .4);
}

.all-courses-btn:hover span {
  transform: translateX(-5px);
}

/* about */
.about-section {
  padding: 0 0 12px
}

.about-box {
  position: relative;
  overflow: hidden;
  border-radius: 21px;
  background: #090909;
  color: #fff;
  box-shadow: 0 16px 35px rgba(0, 0, 0, .16)
}

.about-box::after {
  content: "✦";
  position: absolute;
  right: 20px;
  bottom: 15px;
  font-size: 9rem;
  line-height: 1;
  color: rgba(229, 159, 47, .08);
  transform: rotate(18deg)
}

.about-copy {
  order: 1
}

.about-copy-inner {
  position: relative;
  z-index: 2;
  padding: 32px 34px 24px
}

.about-eyebrow {
  display: block;
  color: var(--gold);
  font-size: .8rem;
  font-weight: 800;
  margin-bottom: .35rem
}

.about-copy h2 {
  font-size: 2.05rem;
  font-weight: 900;
  margin: 0 0 .65rem
}

.about-copy h2 strong {
  color: var(--gold);
  font-family: Georgia, serif;
  font-weight: 700
}

.about-copy p {
  color: rgba(255, 255, 255, .78);
  font-size: .86rem;
  line-height: 2.05;
  margin-bottom: 1.1rem
}

.about-points>div>div {
  text-align: center
}

.about-points i {
  display: block;
  color: var(--orange);
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: .45rem
}

.about-points b {
  display: block;
  color: #fff;
  font-size: .79rem;
  margin-bottom: .1rem
}

.about-points small {
  display: block;
  color: rgba(255, 255, 255, .48);
  font-size: .65rem
}

.about-button {
  margin-top: 1rem;
  min-width: 185px
}

.about-media {
  position: relative;
  padding: 16px;
  order: 2;
  display: flex;
  align-items: stretch;
}

.about-media img,
.about-media__preview {
  width: 100%;
  height: 100%;
  min-height: 280px;
  max-height: 380px;
  object-fit: cover;
  border: 1px solid var(--orange);
  border-radius: 14px;
  display: block;
  pointer-events: none;
}

.video-label {
  position: absolute;
  top: 26px;
  right: 28px;
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  background: rgba(0, 0, 0, .72);
  padding: .38rem .85rem;
  border-radius: 999px
}

.play-button {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: var(--orange);
  font-size: 1.7rem;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  box-shadow: 0 10px 30px rgba(245, 138, 0, .35)
}

.play-button:hover {
  transform: translate(-50%, -50%) scale(1.06)
}

.about-media__video {
  position: relative;
  width: 100%;
  height: 100%;
}

.about-media__preview--playing {
  pointer-events: auto;
}

.about-media__video.is-playing .play-button {
  display: none;
}

/* ====== Video Modal ====== */
#videoModal,
#galleryModal {
  z-index: 1065;
}

#galleryModal .modal-dialog {
  position: relative;
  z-index: 1;
}

body > .modal-backdrop.show {
  z-index: 1060;
}

.modal-close-btn {
  position: absolute;
  top: -50px;
  left: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  opacity: 0.9;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.modal-close-btn:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

.video-wrapper {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7);
  background: #000;
}

.video-wrapper video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
  aspect-ratio: 16/9;
  background: #000;
}

.modal-backdrop.show {
  opacity: 0.85;
  backdrop-filter: blur(8px);
}

/* Responsive */
@media (max-width: 991.98px) {
  .about-media {
    min-height: 310px;
    padding: 12px;
  }

  .about-media img,
  .about-media__preview {
    min-height: 240px;
    max-height: 320px;
  }
}

@media (max-width: 767.98px) {
  .about-media {
    min-height: 250px;
    padding: 10px;
  }

  .about-media img,
  .about-media__preview {
    min-height: 200px;
    max-height: 280px;
  }

  .modal-close-btn {
    top: -40px;
    width: 34px;
    height: 34px;
  }

  .video-wrapper {
    border-radius: 12px;
  }
}

/* ============================================
   VIDEO MODAL - با دکمه Close در بالا
   ============================================ */

.modal-content.bg-transparent {
  background: transparent !important;
}

.modal-body {
  position: relative;
  padding: 0;
}

/* ===== دکمه Close ===== */
.btn-close-modal {
  position: absolute;
  top: -55px;
  left: 0;
  z-index: 1050;

  width: 44px;
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, 0.75);
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;

  color: #fff;
  font-size: 20px;

  cursor: pointer;
  transition: all 0.3s ease;

  backdrop-filter: blur(8px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.btn-close-modal:hover {
  background: #ff6a00;
  border-color: #ff6a00;
  transform: rotate(90deg) scale(1.05);
  box-shadow: 0 8px 30px rgba(255, 106, 0, 0.4);
}

.btn-close-modal i {
  line-height: 1;
  pointer-events: none;
}

/* ===== ویدیو ===== */
.video-wrapper {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
}

.video-wrapper video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  background: #0a0a0a;
}

/* ===== کپشن پایین ویدیو ===== */
.video-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;

  margin-top: 16px;
  padding: 12px 20px;

  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(12px);
  border-radius: 14px;

  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 500;

  border: 1px solid rgba(255, 255, 255, 0.08);
}

.video-caption .video-channel {
  color: #ff8c00;
  font-weight: 700;
}

.video-caption .video-duration {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-family: monospace;
  direction: ltr;
}

/* ===== بک‌دراپ ===== */
.modal-backdrop.show {
  opacity: 0.85;
  backdrop-filter: blur(10px);
  background: rgba(0, 0, 0, 0.8);
}

/* ===== ریسپانسیو ===== */
@media (max-width: 768px) {
  .btn-close-modal {
    top: -48px;
    width: 38px;
    height: 38px;
    font-size: 17px;
  }

  .video-wrapper {
    border-radius: 14px;
  }

  .video-caption {
    font-size: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    margin-top: 12px;
  }

  .video-caption .video-duration {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .btn-close-modal {
    top: -42px;
    width: 34px;
    height: 34px;
    font-size: 15px;
  }

  .video-caption {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 11px;
  }
}

/* ===== تایمر ویدیو ===== */
.video-timer {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.4);
  padding: 2px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  direction: ltr;
  min-width: 100px;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* ===== کپشن ===== */
.video-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;

  margin-top: 16px;
  padding: 12px 20px;

  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(12px);
  border-radius: 14px;

  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 500;

  border: 1px solid rgba(255, 255, 255, 0.08);
}

.video-title {
  flex: 1;
  min-width: 120px;
}

.video-channel {
  color: #ff8c00;
  font-weight: 700;
}

/* ===== ریسپانسیو ===== */
@media (max-width: 576px) {
  .video-caption {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    padding: 10px 14px;
  }

  .video-timer {
    font-size: 12px;
    min-width: 80px;
    padding: 2px 10px;
    align-self: flex-start;
  }

  .video-title {
    font-size: 12px;
    min-width: auto;
  }
}

/* ============================================
   TEACHERS SECTION - Swiper
   ============================================ */

.teachers-section {
  padding: 60px 0 50px;
  background: #f8f2e9;
}

.teachers-slider-wrapper {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.teachersSwiper {
  padding: 15px 0 80px;
  overflow: hidden;
}

.teacher-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  height: 100%;
}

.teacher-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.teacher-card-image {
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: #f0e8dd;
  position: relative;
}

.teacher-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.teacher-card-info {
  padding: 20px 20px 25px;
  text-align: center;
}

.teacher-card-info h3 {
  font-size: 22px;
  font-weight: 900;
  color: #1a1a1a;
  margin: 0 0 4px 0;
}

.teacher-card-info span {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #ff8c00;
  margin-bottom: 2px;
}

.teacher-card-info p {
  font-size: 14px;
  color: #777;
  margin: 0 0 12px 0;
}

.teacher-card-info .badge {
  display: inline-block;
  background: linear-gradient(135deg, #ff8c00, #e67600);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 20px;
  border-radius: 20px;
}

.swiper-nav-wrapper {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  padding: 8px 14px;
  border-radius: 16px;
  border: 1px solid rgba(214, 151, 62, 0.15);
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.06);
  z-index: 10;
}

.swiper-button-prev,
.swiper-button-next {
  position: static !important;
  margin: 0 !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: #ffffff !important;
  border: 1px solid rgba(214, 151, 62, 0.2) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
  color: #333 !important;
  font-size: 0 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  background-image: none !important;
}

.swiper-button-prev i,
.swiper-button-next i {
  font-size: 20px;
  line-height: 1;
  pointer-events: none;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  display: none !important;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background: linear-gradient(135deg, #ff8c00, #e67600) !important;
  border-color: #ff8c00 !important;
  color: #fff !important;
  box-shadow: 0 8px 25px rgba(255, 140, 0, 0.3) !important;
  transform: scale(1.05);
}

.swiper-button-prev:active,
.swiper-button-next:active {
  transform: scale(0.95);
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.4 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  background: #ffffff !important;
  color: #999 !important;
}

.swiper-button-prev.swiper-button-disabled:hover,
.swiper-button-next.swiper-button-disabled:hover {
  background: #ffffff !important;
  color: #999 !important;
  transform: none !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
}

/* ============================================
   STATS SECTION - لوکس
   ============================================ */

.stats-section {
  position: relative;
  padding: 60px 0;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1208 40%, #0d0d0d 100%);
  overflow: hidden;
}

.stats-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(ellipse at 30% 50%, rgba(255, 140, 0, 0.04) 0%, transparent 60%);
  pointer-events: none;
  animation: statsGlow 8s ease-in-out infinite alternate;
}

@keyframes statsGlow {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(5%, 3%) scale(1.1);
  }
}

.stats-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 140, 0, 0.3), rgba(255, 200, 80, 0.6), rgba(255, 140, 0, 0.3), transparent);
}

.stats-wrapper {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px 24px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 20px;
  border: 1px solid rgba(255, 140, 0, 0.08);
  backdrop-filter: blur(10px);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.stat-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 140, 0, 0.05), transparent 50%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.stat-item:hover::before {
  opacity: 1;
}

.stat-item:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 140, 0, 0.25);
  box-shadow: 0 20px 60px rgba(255, 140, 0, 0.08), inset 0 1px 0 rgba(255, 140, 0, 0.1);
  background: rgba(255, 255, 255, 0.06);
}

.stat-icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 140, 0, 0.15), rgba(255, 200, 80, 0.05));
  border: 1px solid rgba(255, 140, 0, 0.15);
  transition: all 0.4s ease;
}

.stat-item:hover .stat-icon {
  background: linear-gradient(135deg, rgba(255, 140, 0, 0.25), rgba(255, 200, 80, 0.1));
  border-color: rgba(255, 140, 0, 0.3);
  transform: scale(1.05) rotate(-3deg);
}

.stat-icon i {
  font-size: 28px;
  color: #ff8c00;
  transition: all 0.4s ease;
}

.stat-item:hover .stat-icon i {
  color: #ffaa33;
  transform: scale(1.1);
}

.stat-content {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 4px;
}

.stat-number {
  font-size: 38px;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  font-family: 'Vazirmatn', sans-serif;
  letter-spacing: -1px;
  background: linear-gradient(135deg, #ffffff 30%, #ffaa44 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.3s ease;
}

.stat-item:hover .stat-number {
  background: linear-gradient(135deg, #ffaa44 0%, #ffffff 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-plus,
.stat-percent {
  font-size: 26px;
  font-weight: 800;
  color: #ff8c00;
  line-height: 1;
  margin-right: 2px;
}

.stat-percent {
  font-size: 28px;
}

.stat-label {
  display: block;
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}

.stat-item:hover .stat-label {
  color: rgba(255, 255, 255, 0.7);
}

/* ============================================
   TESTIMONIALS SECTION
   ============================================ */

.testimonials-section {
  position: relative;
  padding: 60px 0 70px;
  background: linear-gradient(160deg, #0a0806 0%, #1a1208 30%, #0d0a06 60%, #0a0806 100%);
  overflow: hidden;
}

/* ستاره‌ها */
.testimonials-section::before {
  content: '✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 18px;
  letter-spacing: 40px;
  color: rgba(255, 180, 50, 0.03);
  line-height: 80px;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  transform: rotate(-5deg) scale(1.2);
}

.testimonials-section::after {
  content: '';
  position: absolute;
  top: -30%;
  right: -20%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse, rgba(255, 180, 50, 0.06), transparent 70%);
  pointer-events: none;
  animation: testimonialsGlow 6s ease-in-out infinite alternate;
}

@keyframes testimonialsGlow {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.5;
  }

  100% {
    transform: translate(-10%, 5%) scale(1.2);
    opacity: 1;
  }
}

/* هدر */
.testimonials-header {
  text-align: center;
  position: relative;
  z-index: 2;
  margin-bottom: 40px;
}

.testimonials-eyebrow {
  display: inline-block;
  color: #ffaa33;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 8px;
  background: rgba(255, 170, 51, 0.08);
  padding: 4px 20px;
  border-radius: 20px;
  border: 1px solid rgba(255, 170, 51, 0.1);
}

.testimonials-header h2 {
  font-size: 36px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 6px 0;
}

.testimonials-header h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #ff8c00, #ffcc66);
  margin: 10px auto 0;
  border-radius: 2px;
}

.testimonials-header p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}

/* ===== WRAPPER ===== */
.testimonials-slider-wrapper {
  position: relative;
  z-index: 2;
  padding: 0 70px;
  max-width: 1200px;
  margin: 0 auto;
}

.testimonialsSwiper {
  padding: 10px 0 20px;
  overflow: hidden;
}

/* ============================================
   دکمه‌های ناوبری (چپ و راست اسلایدر)
   ============================================ */

.testimonial-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;

  width: 52px;
  height: 52px;

  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 170, 51, 0.2);
  backdrop-filter: blur(10px);

  display: flex;
  align-items: center;
  justify-content: center;

  color: #ffaa33;
  cursor: pointer;

  transition: all 0.4s ease;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.3);
}

.testimonial-btn:hover {
  background: linear-gradient(135deg, #ff8c00, #e67600);
  border-color: #ff8c00;
  color: #fff;
  box-shadow: 0 8px 35px rgba(255, 140, 0, 0.4);
  transform: translateY(-50%) scale(1.08);
}

.testimonial-prev {
  left: 0;
}

.testimonial-next {
  right: 0;
}

/* ============================================
   کارت نظرات
   ============================================ */

.testimonial-card {
  position: relative;
  padding: 28px 24px 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
  border-radius: 20px;
  border: 1px solid rgba(255, 170, 51, 0.08);
  backdrop-filter: blur(10px);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 220px;
}

.testimonial-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 170, 51, 0.2);
  box-shadow: 0 20px 60px rgba(255, 140, 0, 0.06);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
}

.testimonial-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.testimonial-avatar {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 170, 51, 0.2);
  transition: border-color 0.3s ease;
}

.testimonial-card:hover .testimonial-avatar {
  border-color: rgba(255, 170, 51, 0.4);
}

.testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-author-info {
  flex: 1;
}

.testimonial-author-info strong {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
}

.testimonial-author-info span {
  display: block;
  font-size: 13px;
  color: rgba(255, 170, 51, 0.5);
  font-weight: 500;
}

.testimonial-body {
  position: relative;
  padding-top: 6px;
}

.testimonial-body i {
  position: absolute;
  top: -4px;
  right: -2px;
  font-size: 28px;
  color: rgba(255, 170, 51, 0.08);
  line-height: 1;
}

.testimonial-body p {
  font-size: 15px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  padding-right: 10px;
}

.testimonial-play-btn {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #ff8c00, #e67600);
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.4s ease;
  box-shadow: 0 4px 15px rgba(255, 140, 0, 0.25);
  opacity: 0.6;
}

.testimonial-play-btn:hover {
  opacity: 1;
  transform: scale(1.1);
  box-shadow: 0 8px 30px rgba(255, 140, 0, 0.4);
}

/* ============================================
   ریسپانسیو
   ============================================ */

@media (max-width: 992px) {
  .testimonials-slider-wrapper {
    padding: 0 50px;
  }

  .testimonial-btn {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  .testimonials-section {
    padding: 40px 0 50px;
  }

  .testimonials-slider-wrapper {
    padding: 0 40px;
  }

  .testimonial-btn {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }

  .testimonial-card {
    padding: 20px 18px 18px;
    min-height: 190px;
  }

  .testimonial-avatar {
    width: 48px;
    height: 48px;
  }

  .testimonial-author-info strong {
    font-size: 16px;
  }

  .testimonial-body p {
    font-size: 14px;
  }
}

@media (max-width: 576px) {
  .testimonials-slider-wrapper {
    padding: 0 20px;
  }

  .testimonial-btn {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .testimonial-card {
    padding: 16px 14px 14px;
    min-height: 170px;
    border-radius: 16px;
  }

  .testimonial-avatar {
    width: 40px;
    height: 40px;
  }

  .testimonial-author-info strong {
    font-size: 14px;
  }

  .testimonial-body p {
    font-size: 13px;
  }

  .testimonials-header h2 {
    font-size: 22px;
  }

  .testimonial-play-btn {
    width: 30px;
    height: 30px;
    font-size: 13px;
    top: 12px;
    left: 12px;
  }
}

/* cta */
.cta-section {
  padding: 0 0 8px;
  margin-top: 60px;
  margin-bottom: 30px;
}

.cta-box {
  display: grid;
  grid-template-columns: 1.35fr .8fr 1fr;
  align-items: center;
  gap: 1rem;
  min-height: 82px;
  padding: 14px 22px;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(100deg, #dd7200, #ee8708 62%, #d86a00);
  box-shadow: 0 10px 25px rgba(155, 74, 0, .22);
  overflow: hidden
}

.cta-main h2 {
  font-size: 1.24rem;
  font-weight: 900;
  margin: 0 0 .1rem
}

.cta-main p {
  font-size: .78rem;
  margin: 0;
  color: rgba(255, 255, 255, .86)
}

.cta-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: #d97200;
  font-weight: 900;
  background: #fff;
  border-radius: 7px;
  padding: .72rem 1rem;
  white-space: nowrap
}

.cta-button:hover {
  color: #b95b00;
  transform: translateY(-2px)
}

.cta-contact {
  text-align: left
}

.cta-contact span {
  display: block;
  font-size: .72rem;
  color: rgba(255, 255, 255, .82)
}

.cta-contact strong {
  display: block;
  font-size: 1.08rem;
  direction: ltr
}

/* footer */
.site-footer {
  background: #080808;
  color: #fff;
  padding: 26px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .05)
}

.footer-brand img {
  width: 120px;
  height: 44px;
  object-fit: cover;
  mix-blend-mode: screen;
  margin-bottom: .65rem
}

.footer-brand p,
.footer-contact p {
  color: rgba(255, 255, 255, .58);
  font-size: .72rem;
  line-height: 1.9;
  margin-bottom: .4rem
}

.socials {
  display: flex;
  gap: .55rem;
  margin-top: .65rem
}

.socials a {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(245, 138, 0, .4);
  border-radius: 50%;
  color: var(--orange)
}

.socials a:hover {
  color: #fff;
  background: var(--orange)
}

.footer-links,
.footer-contact {
  display: flex;
  flex-direction: column
}

.footer-links h3,
.footer-contact h3 {
  font-size: .8rem;
  font-weight: 900;
  color: var(--orange);
  margin-bottom: .55rem
}

.footer-links a {
  color: rgba(255, 255, 255, .62);
  font-size: .71rem;
  padding: .15rem 0
}

.footer-links a:hover {
  color: var(--orange)
}

.footer-contact p i {
  color: var(--orange);
  margin-left: .3rem
}

.footer-bottom {
  margin-top: 18px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .42);
  text-align: center;
  font-size: .66rem
}

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

@media (max-width:1199.98px) {
  .hero h1 {
    font-size: 3rem
  }

  .about-copy-inner {
    padding: 26px 24px 21px
  }

  .about-copy p {
    font-size: .8rem
  }
}

@media (max-width:991.98px) {
  .hero .row {
    min-height: auto
  }

  .hero-content {
    order: 2 !important
  }

  .hero-media {
    order: 1 !important;
    min-height: 330px
  }

  .hero-media::after {
    background: linear-gradient(0deg, #070707 0, transparent 34%)
  }

  .hero-inner {
    padding: 30px 24px 38px;
    text-align: center
  }

  .hero h1 {
    font-size: clamp(2.1rem, 8vw, 3.35rem)
  }

  .hero p {
    margin-inline: auto
  }

  .hero-actions {
    justify-content: center
  }

  .hero-pattern-dots {
    left: 7%;
    top: 20px
  }

  .light-page {
    border-top-right-radius: 32px;
    border-top-left-radius: 32px;
    margin-top: -18px
  }

  .about-copy {
    order: 2
  }

  .about-media {
    order: 1;
    min-height: 310px;
    padding: 12px;
  }

  .about-media img,
  .about-media__preview {
    min-height: 240px;
    max-height: 320px;
  }

  .about-copy-inner {
    text-align: center
  }

  .about-button {
    margin-inline: auto
  }

  .cta-box {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 18px
  }

  .cta-contact {
    text-align: center
  }

  /* Teachers responsive */
  .teacher-card-image {
    height: 200px;
  }

  .teacher-card-info h3 {
    font-size: 20px;
  }

  /* Stats responsive */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .stat-number {
    font-size: 32px;
  }

  .stat-plus,
  .stat-percent {
    font-size: 22px;
  }

  .stat-icon {
    width: 52px;
    height: 52px;
  }

  .stat-icon i {
    font-size: 24px;
  }

  /* Testimonials responsive */
  @media (max-width: 992px) {
    .testimonials-slider-wrapper {
      padding: 0 40px;
    }

    .swiper-button-prev.testimonial-prev {
      left: -5px;
    }

    .swiper-button-next.testimonial-next {
      right: -5px;
    }

    .swiper-button-prev.testimonial-prev,
    .swiper-button-next.testimonial-next {
      width: 42px;
      height: 42px;
    }

    .swiper-button-prev.testimonial-prev i,
    .swiper-button-next.testimonial-next i {
      font-size: 19px;
    }

    .testimonials-header h2 {
      font-size: 30px;
    }
  }

  @media (max-width: 768px) {
    .testimonials-section {
      padding: 40px 0 50px;
    }

    .testimonials-slider-wrapper {
      padding: 0 30px;
    }

    .swiper-button-prev.testimonial-prev,
    .swiper-button-next.testimonial-next {
      width: 36px;
      height: 36px;
    }

    .swiper-button-prev.testimonial-prev i,
    .swiper-button-next.testimonial-next i {
      font-size: 16px;
    }

    .testimonial-card {
      padding: 24px 20px 20px;
      min-height: 240px;
    }

    .testimonial-text {
      font-size: 14px;
    }

    .testimonials-header h2 {
      font-size: 26px;
    }

    .testimonial-play-btn {
      width: 34px;
      height: 34px;
      font-size: 15px;
      top: 16px;
      left: 16px;
    }
  }

  @media (max-width: 576px) {
    .testimonials-slider-wrapper {
      padding: 0 10px;
    }

    .swiper-button-prev.testimonial-prev,
    .swiper-button-next.testimonial-next {
      width: 30px;
      height: 30px;
    }

    .swiper-button-prev.testimonial-prev i,
    .swiper-button-next.testimonial-next i {
      font-size: 14px;
    }

    .testimonial-card {
      padding: 20px 16px 18px;
      min-height: 200px;
      border-radius: 18px;
    }

    .testimonial-text {
      font-size: 13px;
      line-height: 1.8;
    }

    .testimonial-author img {
      width: 40px;
      height: 40px;
    }

    .testimonial-author strong {
      font-size: 14px;
    }

    .testimonial-author span {
      font-size: 11px;
    }

    .testimonials-header h2 {
      font-size: 22px;
    }

    .testimonials-header p {
      font-size: 14px;
    }
  }

  .courses-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:767.98px) {
  body {
    line-height: 1.7
  }

  .container-xxl {
    padding-inline: 14px
  }

  .hero-media {
    min-height: 265px
  }

  .hero-seal {
    width: 72px;
    height: 72px;
    top: 11%;
    left: 5%
  }

  .hero-inner {
    padding: 25px 18px 34px
  }

  .hero-eyebrow {
    font-size: .76rem
  }

  .hero p {
    font-size: .86rem;
    line-height: 1.9
  }

  .hero-actions .btn {
    flex: 1;
    min-width: 145px
  }

  .section-title {
    gap: .65rem;
    margin-bottom: 13px
  }

  .section-title h2 {
    font-size: 1.05rem
  }

  .section-title span {
    width: 42px
  }

  .about-section {
    padding-top: 2px
  }

  .about-box {
    border-radius: 17px
  }

  .about-media {
    min-height: 250px;
    padding: 10px;
  }

  .about-media img,
  .about-media__preview {
    min-height: 200px;
    max-height: 280px;
  }

  .about-copy-inner {
    padding: 22px 16px 20px
  }

  .about-copy h2 {
    font-size: 1.6rem
  }

  .about-copy p {
    font-size: .74rem;
    line-height: 1.95
  }

  .about-points b {
    font-size: .7rem
  }

  .about-points small {
    font-size: .58rem
  }

  .modal-close-btn {
    top: -40px;
    width: 34px;
    height: 34px;
  }

  .video-wrapper {
    border-radius: 12px;
  }

  .video-caption {
    font-size: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    margin-top: 12px;
  }

  .video-caption .video-timer {
    font-size: 11px;
  }

  .cta-main h2 {
    font-size: 1.05rem
  }

  .cta-contact strong {
    font-size: .95rem
  }

  .site-footer {
    text-align: center
  }

  .footer-brand img {
    margin-inline: auto
  }

  .socials {
    justify-content: center
  }

  /* Teachers responsive */
  .teachers-slider-wrapper {
    padding: 0 10px;
  }

  .teacher-card-image {
    height: 180px;
  }

  .teacher-card-info {
    padding: 15px 15px 20px;
  }

  .teacher-card-info h3 {
    font-size: 18px;
  }

  .swiper-nav-wrapper {
    padding: 5px 10px;
    gap: 8px;
    bottom: 5px;
  }

  .swiper-button-prev,
  .swiper-button-next {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
  }

  .swiper-button-prev i,
  .swiper-button-next i {
    font-size: 15px;
  }

  /* Stats responsive */
  .stats-section {
    padding: 40px 0;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .stat-item {
    padding: 18px 16px;
    gap: 14px;
    border-radius: 14px;
  }

  .stat-number {
    font-size: 24px;
  }

  .stat-plus,
  .stat-percent {
    font-size: 18px;
  }

  .stat-label {
    font-size: 11px;
  }

  .stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .stat-icon i {
    font-size: 20px;
  }

  /* Testimonials responsive */
  .testimonials-section {
    padding: 40px 0 50px;
  }

  .testimonials-slider-wrapper {
    padding: 0 30px;
  }

  .swiper-button-prev.testimonial-prev,
  .swiper-button-next.testimonial-next {
    width: 38px;
    height: 38px;
  }

  .swiper-button-prev.testimonial-prev i,
  .swiper-button-next.testimonial-next i {
    font-size: 17px;
  }

  .testimonial-card {
    padding: 24px 20px 20px;
    min-height: 240px;
  }

  .testimonial-text {
    font-size: 14px;
  }

  .testimonials-header h2 {
    font-size: 26px;
  }

  .testimonial-play-btn {
    width: 34px;
    height: 34px;
    font-size: 15px;
    top: 16px;
    left: 16px;
  }

  .courses-wrapper {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .course-image {
    height: 210px;
  }

  .section-title h2:before,
  .section-title h2:after {
    width: 40px;
    margin: 0 10px;
  }
}

@media (max-width:576px) {
  .teachers-slider-wrapper {
    padding: 0 10px;
  }

  .teacher-card-image {
    height: 180px;
  }

  .teacher-card-info {
    padding: 15px 15px 20px;
  }

  .teacher-card-info h3 {
    font-size: 18px;
  }

  .swiper-nav-wrapper {
    padding: 5px 10px;
    gap: 8px;
    bottom: 5px;
  }

  .swiper-button-prev,
  .swiper-button-next {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
  }

  .swiper-button-prev i,
  .swiper-button-next i {
    font-size: 15px;
  }

  /* Testimonials responsive */
  .testimonials-slider-wrapper {
    padding: 0 10px;
  }

  .swiper-button-prev.testimonial-prev,
  .swiper-button-next.testimonial-next {
    width: 32px;
    height: 32px;
  }

  .swiper-button-prev.testimonial-prev i,
  .swiper-button-next.testimonial-next i {
    font-size: 14px;
  }

  .testimonial-card {
    padding: 20px 16px 18px;
    min-height: 200px;
    border-radius: 18px;
  }

  .testimonial-text {
    font-size: 13px;
    line-height: 1.8;
  }

  .testimonial-author img {
    width: 40px;
    height: 40px;
  }

  .testimonial-author strong {
    font-size: 14px;
  }

  .testimonial-author span {
    font-size: 11px;
  }

  .testimonials-header h2 {
    font-size: 22px;
  }

  .testimonials-header p {
    font-size: 14px;
  }

  .video-caption {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    padding: 10px 14px;
  }

  .video-timer {
    font-size: 12px;
    min-width: 80px;
    padding: 2px 10px;
    align-self: flex-start;
  }

  .video-title {
    font-size: 12px;
    min-width: auto;
  }
}

@media (max-width:420px) {
  .hero h1 {
    font-size: 1.95rem
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%
  }

  .hero-actions .btn {
    min-width: 0;
    padding: .65rem .5rem;
    font-size: .78rem
  }

  .course-scroll>div {
    width: 84%
  }

  .course-image {
    height: 150px
  }

  .gallery-grid img {
    height: 100px
  }

  .stat-item {
    flex-direction: column;
    text-align: center;
    padding: 16px 12px;
    gap: 10px;
  }

  .stat-content {
    justify-content: center;
  }

  .stat-number {
    font-size: 22px;
  }

  .stat-label {
    font-size: 10px;
    margin-top: 2px;
  }
}

@media (max-width: 400px) {
  .stat-item {
    flex-direction: column;
    text-align: center;
    padding: 16px 12px;
    gap: 10px;
  }

  .stat-content {
    justify-content: center;
  }

  .stat-number {
    font-size: 22px;
  }

  .stat-label {
    font-size: 10px;
    margin-top: 2px;
  }
}

/* ===== دکمه‌ها همیشه فعال ===== */
.swiper-button-prev.testimonial-prev,
.swiper-button-next.testimonial-next {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.swiper-button-prev.testimonial-prev.swiper-button-disabled,
.swiper-button-next.testimonial-next.swiper-button-disabled {
  opacity: 0.4 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.swiper-button-prev.testimonial-prev.swiper-button-disabled:hover,
.swiper-button-next.testimonial-next.swiper-button-disabled:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 170, 51, 0.2) !important;
  color: #ffaa33 !important;
  transform: translateY(-50%) scale(1) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important;
}

/* ============================================
   GALLERY SECTION - لوکس با افکت شهاب سنگ
   ============================================ */

.gallery-section {
  position: relative;
  padding: 60px 0 50px;
  background: linear-gradient(160deg, #0a0806 0%, #120d08 30%, #0a0806 60%, #080604 100%);
  overflow: hidden;
  margin-top: 40px;
}

/* ===== شهاب سنگ‌ها ===== */
.shooting-stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.shooting-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px 2px rgba(255, 200, 100, 0.3);
  animation: shoot linear infinite;
}

.shooting-star::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 1px;
  background: linear-gradient(to left, rgba(255, 200, 100, 0.4), transparent);
}

/* ===== موقعیت و زمان هر شهاب ===== */
.shooting-star:nth-child(1) {
  top: 10%;
  left: 20%;
  animation-duration: 4s;
  animation-delay: 0s;
  width: 1.5px;
  height: 1.5px;
}

.shooting-star:nth-child(2) {
  top: 30%;
  left: 70%;
  animation-duration: 5s;
  animation-delay: 1.5s;
  width: 2px;
  height: 2px;
}

.shooting-star:nth-child(3) {
  top: 50%;
  left: 10%;
  animation-duration: 3.5s;
  animation-delay: 0.8s;
  width: 1px;
  height: 1px;
}

.shooting-star:nth-child(4) {
  top: 70%;
  left: 50%;
  animation-duration: 4.5s;
  animation-delay: 2.5s;
  width: 2px;
  height: 2px;
}

.shooting-star:nth-child(5) {
  top: 15%;
  left: 85%;
  animation-duration: 3.8s;
  animation-delay: 1.2s;
  width: 1.5px;
  height: 1.5px;
}

.shooting-star:nth-child(6) {
  top: 60%;
  left: 30%;
  animation-duration: 5.5s;
  animation-delay: 0.5s;
  width: 1px;
  height: 1px;
}

.shooting-star:nth-child(7) {
  top: 40%;
  left: 60%;
  animation-duration: 4.2s;
  animation-delay: 3s;
  width: 2px;
  height: 2px;
}

.shooting-star:nth-child(8) {
  top: 80%;
  left: 80%;
  animation-duration: 3.2s;
  animation-delay: 1.8s;
  width: 1.5px;
  height: 1.5px;
}

.shooting-star:nth-child(9) {
  top: 25%;
  left: 40%;
  animation-duration: 4.8s;
  animation-delay: 2.2s;
  width: 1px;
  height: 1px;
}

.shooting-star:nth-child(10) {
  top: 55%;
  left: 90%;
  animation-duration: 3.6s;
  animation-delay: 0.3s;
  width: 2px;
  height: 2px;
}

/* ===== انیمیشن شهاب ===== */
@keyframes shoot {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }

  15% {
    opacity: 1;
  }

  20% {
    opacity: 0;
  }

  100% {
    transform: translate(-300px, 200px) scale(0);
    opacity: 0;
  }
}

/* ===== ستاره‌های پس‌زمینه ===== */
.stars-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 5% 10%, rgba(255, 255, 255, 0.08), transparent),
    radial-gradient(1px 1px at 15% 30%, rgba(255, 255, 255, 0.06), transparent),
    radial-gradient(1px 1px at 25% 70%, rgba(255, 255, 255, 0.10), transparent),
    radial-gradient(1px 1px at 35% 15%, rgba(255, 255, 255, 0.05), transparent),
    radial-gradient(1px 1px at 45% 55%, rgba(255, 255, 255, 0.08), transparent),
    radial-gradient(1px 1px at 55% 85%, rgba(255, 255, 255, 0.06), transparent),
    radial-gradient(1px 1px at 65% 25%, rgba(255, 255, 255, 0.10), transparent),
    radial-gradient(1px 1px at 75% 45%, rgba(255, 255, 255, 0.05), transparent),
    radial-gradient(1px 1px at 85% 75%, rgba(255, 255, 255, 0.08), transparent),
    radial-gradient(1px 1px at 95% 35%, rgba(255, 255, 255, 0.06), transparent),
    radial-gradient(1px 1px at 10% 50%, rgba(255, 255, 255, 0.04), transparent),
    radial-gradient(1px 1px at 30% 80%, rgba(255, 255, 255, 0.07), transparent),
    radial-gradient(1px 1px at 50% 20%, rgba(255, 255, 255, 0.05), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(255, 255, 255, 0.09), transparent),
    radial-gradient(1px 1px at 90% 10%, rgba(255, 255, 255, 0.04), transparent);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* ===== محتوای اصلی بالای افکت‌ها ===== */
.gallery-section .container-xxl {
  position: relative;
  z-index: 2;
}

/* ===== هدر ===== */
.gallery-header {
  text-align: center;
  position: relative;
  z-index: 2;
  margin-bottom: 35px;
}

.gallery-eyebrow {
  display: inline-block;
  color: #ffaa33;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 8px;
  background: rgba(255, 170, 51, 0.06);
  padding: 4px 20px;
  border-radius: 20px;
  border: 1px solid rgba(255, 170, 51, 0.08);
}

.gallery-header h2 {
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 6px 0;
}

.gallery-header h2::after {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background: linear-gradient(90deg, #ff8c00, #ffcc66);
  margin: 10px auto 0;
  border-radius: 2px;
}

.gallery-header p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.35);
  margin: 0;
}

/* ============================================
   GRID
   ============================================ */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  position: relative;
  z-index: 2;
}

/* ===== هر آیتم ===== */
.gallery-item {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1/1;
  background: #111;
  border: 1px solid rgba(255, 170, 51, 0.06);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== هاور ===== */
.gallery-item:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 170, 51, 0.2);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 40px rgba(255, 170, 51, 0.04);
}

.gallery-item:hover img {
  transform: scale(1.08);
}

/* ===== اوورلی ===== */
.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10, 8, 6, 0.85), rgba(255, 140, 0, 0.15));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(4px);
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

.gallery-overlay i {
  font-size: 28px;
  color: #ffaa33;
  transform: scale(0.8);
  transition: all 0.4s ease;
}

.gallery-item:hover .gallery-overlay i {
  transform: scale(1);
}

.gallery-overlay span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
  letter-spacing: 1px;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.4s ease 0.1s;
}

.gallery-item:hover .gallery-overlay span {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   دکمه نمایش همه
   ============================================ */

.gallery-section__empty {
  margin: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.65);
  font-size: 15px;
  position: relative;
  z-index: 2;
}

.gallery-btn-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 28px;
  position: relative;
  z-index: 2;
}

.gallery-show-all {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 36px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 170, 51, 0.15);
  border-radius: 50px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.4s ease;
  backdrop-filter: blur(6px);
}

.gallery-show-all:hover {
  background: linear-gradient(135deg, #ff8c00, #e67600);
  border-color: #ff8c00;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 35px rgba(255, 140, 0, 0.25);
}

.gallery-show-all i {
  font-size: 18px;
  transition: all 0.3s ease;
}

.gallery-show-all:hover i {
  transform: translateX(-4px);
}

/* ============================================
   مودال گالری
   ============================================ */

.gallery-modal-content {
  background: transparent !important;
  border: none !important;
}

.gallery-modal-close {
  position: absolute;
  top: -50px;
  left: 0;
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}

.gallery-modal-close:hover {
  background: #ff8c00;
  border-color: #ff8c00;
  transform: rotate(90deg);
}

.gallery-modal-image {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #0a0806;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
}

.gallery-modal-image img {
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  display: block;
}

.gallery-modal-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18px 24px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), transparent);
}

.gallery-modal-caption span {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

/* ============================================
   ریسپانسیو
   ============================================ */

@media (max-width: 992px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .gallery-header h2 {
    font-size: 28px;
  }

  .gallery-item {
    aspect-ratio: 1/1;
  }
}

@media (max-width: 768px) {
  .gallery-section {
    padding: 40px 0 35px;
  }

  .gallery-grid {
    gap: 8px;
  }

  .gallery-header h2 {
    font-size: 24px;
  }

  .gallery-header p {
    font-size: 14px;
  }

  .gallery-overlay i {
    font-size: 22px;
  }

  .gallery-overlay span {
    font-size: 11px;
  }

  .gallery-show-all {
    padding: 12px 28px;
    font-size: 14px;
    gap: 10px;
  }

  .gallery-modal-close {
    top: -40px;
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .gallery-modal-caption span {
    font-size: 15px;
  }

  .gallery-modal-caption {
    padding: 14px 18px;
  }
}

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

  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .gallery-item {
    border-radius: 10px;
    aspect-ratio: 1/1;
  }

  .gallery-header h2 {
    font-size: 20px;
  }

  .gallery-header p {
    font-size: 13px;
  }

  .gallery-eyebrow {
    font-size: 12px;
    padding: 3px 14px;
  }

  .gallery-overlay i {
    font-size: 18px;
  }

  .gallery-overlay span {
    font-size: 10px;
  }

  .gallery-show-all {
    padding: 10px 20px;
    font-size: 13px;
    gap: 8px;
  }

  .gallery-show-all i {
    font-size: 15px;
  }

  .gallery-modal-close {
    top: -34px;
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .gallery-modal-image {
    border-radius: 12px;
  }

  .gallery-modal-caption span {
    font-size: 13px;
  }

  .gallery-modal-caption {
    padding: 10px 14px;
  }

  /* ===== شهاب‌ها رو در موبایل کم‌تر می‌کنیم ===== */
  .shooting-star:nth-child(5),
  .shooting-star:nth-child(6),
  .shooting-star:nth-child(7),
  .shooting-star:nth-child(8) {
    display: none;
  }
}

@media (max-width: 400px) {
  .gallery-grid {
    gap: 4px;
  }

  .gallery-item {
    border-radius: 8px;
  }

  .gallery-header h2 {
    font-size: 18px;
  }

  .gallery-show-all {
    padding: 8px 16px;
    font-size: 12px;
    gap: 6px;
  }

  .gallery-show-all i {
    font-size: 13px;
  }
}

/* ===== ثبت‌نام ===== */
.register-page {
    min-height: calc(100vh - 200px);
    padding: 50px 0 70px;
    background: linear-gradient(180deg, #fbf8f3, #f8f2e9);
    position: relative;
}

    .register-page::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: .18;
        pointer-events: none;
        background-image: radial-gradient(rgba(182, 129, 60, .22) .6px, transparent .6px);
        background-size: 10px 10px;
    }

.register-wrapper {
    position: relative;
    z-index: 2;
    max-width: 560px;
    margin: 0 auto;
}

.register-card {
    background: #fff;
    border-radius: 24px;
    border: 1px solid rgba(218, 155, 62, .35);
    box-shadow: 0 20px 50px rgba(69, 44, 15, .12);
    overflow: hidden;
}

.register-header {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1208 100%);
    padding: 32px 30px 28px;
    text-align: center;
    position: relative;
}

    .register-header::after {
        content: "✦";
        position: absolute;
        left: 20px;
        bottom: 10px;
        font-size: 4rem;
        color: rgba(229, 159, 47, .12);
        line-height: 1;
    }

    .register-header h1 {
        font-size: 1.75rem;
        font-weight: 900;
        color: #fff;
        margin: 0 0 8px;
    }

    .register-header p {
        color: rgba(255, 255, 255, .65);
        font-size: .9rem;
        margin: 0;
    }

.register-body {
    padding: 32px 28px 28px;
}

.form-group {
    margin-bottom: 1.25rem;
}

    .form-group label {
        display: block;
        font-weight: 700;
        font-size: .9rem;
        color: #211d19;
        margin-bottom: .45rem;
    }

        .form-group label .required {
            color: #e87500;
            margin-right: 2px;
        }

        .form-group label .optional {
            color: #999;
            font-weight: 500;
            font-size: .8rem;
        }

.form-control-custom {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border: 1.5px solid rgba(214, 151, 62, .35);
    border-radius: 12px;
    background: #faf7f1;
    font-family: inherit;
    font-size: .95rem;
    color: #211d19;
    transition: all .25s ease;
    direction: rtl;
}

    .form-control-custom:focus {
        outline: none;
        border-color: #f58a00;
        background: #fff;
        box-shadow: 0 0 0 4px rgba(245, 138, 0, .12);
    }

    .form-control-custom::placeholder {
        color: #aaa;
    }

    .form-control-custom.is-invalid {
        border-color: #dc3545;
        background: #fff5f5;
    }

    .form-control-custom.is-valid {
        border-color: #28a745;
    }

.invalid-feedback {
    display: none;
    color: #dc3545;
    font-size: .8rem;
    margin-top: .35rem;
    font-weight: 500;
}

.form-control-custom.is-invalid + .invalid-feedback {
    display: block;
}

.password-wrapper {
    position: relative;
}

.password-toggle {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0;
    line-height: 1;
}

    .password-toggle:hover {
        color: #f58a00;
    }

.password-wrapper .form-control-custom {
    padding-left: 44px;
}

.register-submit {
    width: 100%;
    height: 52px;
    margin-top: 8px;
    border: none;
    border-radius: 12px;
    font-weight: 800;
    font-size: 1.05rem;
    color: #fff;
    background: linear-gradient(135deg, #ff9f1f, #e87500);
    box-shadow: 0 8px 24px rgba(242, 131, 0, .28);
    cursor: pointer;
    transition: all .3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

    .register-submit:hover {
        transform: translateY(-2px);
        background: linear-gradient(135deg, #ffad33, #ef7d00);
        box-shadow: 0 12px 30px rgba(242, 131, 0, .35);
    }

    .register-submit:disabled {
        opacity: .7;
        cursor: not-allowed;
        transform: none;
    }

.register-footer {
    text-align: center;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(214, 151, 62, .2);
    font-size: .9rem;
    color: #746c63;
}

    .register-footer a {
        color: #e87500;
        font-weight: 700;
    }

        .register-footer a:hover {
            color: #c96500;
        }

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 576px) {
    .register-page {
        padding: 30px 0 50px;
    }

    .register-body {
        padding: 24px 18px 22px;
    }

    .register-header {
        padding: 26px 20px 22px;
    }

        .register-header h1 {
            font-size: 1.45rem;
        }

    .form-row-2 {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.otp-container {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 10px 0 8px;
    direction: ltr;
}

.otp-input {
    width: 52px;
    height: 60px;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 800;
    border: 1.5px solid rgba(214, 151, 62, .4);
    border-radius: 14px;
    background: #faf7f1;
    color: #211d19;
    transition: all .25s ease;
    font-family: inherit;
    caret-color: #f58a00;
}

    .otp-input:focus {
        outline: none;
        border-color: #f58a00;
        background: #fff;
        box-shadow: 0 0 0 4px rgba(245, 138, 0, .15);
        transform: translateY(-2px);
    }

    .otp-input.is-invalid {
        border-color: #dc3545;
        background: #fff5f5;
    }

.otp-error {
    text-align: center;
    color: #dc3545;
    font-size: .9rem;
    font-weight: 600;
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.resend-btn {
    background: none;
    border: none;
    color: #e87500;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    padding: 0;
    margin-right: 4px;
}

    .resend-btn:hover:not(:disabled) {
        color: #c96500;
        text-decoration: underline;
    }

    .resend-btn:disabled {
        color: #999;
        cursor: not-allowed;
    }

@@media (max-width: 480px) {
    .otp-container {
        gap: 8px;
    }

    .otp-input {
        width: 44px;
        height: 52px;
        font-size: 1.35rem;
        border-radius: 12px;
    }
}

/* ============================================
   COURSE DETAIL PAGE
   ============================================ */

.cd-page {
  background: #faf7f1;
}

.cd-state {
  text-align: center;
  padding: 100px 20px;
  color: #777;
}

.cd-state i {
  font-size: 42px;
  color: #e99222;
  margin-bottom: 14px;
}

.cd-state--inline {
  padding: 32px 20px;
}

.cd-state--inline i {
  font-size: 28px;
  margin-bottom: 10px;
}

.cd-state--inline p {
  margin: 0;
  font-size: 14px;
}

.cd-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 28px;
  align-items: start;
  padding: 18px 0 48px;
}

.cd-page-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.cd-page-side {
  position: sticky;
  top: 88px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

.cd-hero-card {
  background: #fff;
  border: 1px solid rgba(218, 155, 62, .3);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(69, 44, 15, .06);
  overflow: hidden;
}

.cd-hero-card--visual {
  display: flex;
  flex-direction: column;
  padding: 0;
  height: auto;
  flex-shrink: 0;
  width: 100%;
  background: linear-gradient(180deg, #fff 0%, #fdf9f2 100%);
  border: 1px solid rgba(218, 155, 62, .38);
  box-shadow: 0 14px 36px rgba(69, 44, 15, .09);
}

.cd-hero-card__accent {
  height: 4px;
  background: linear-gradient(90deg, #df7c00, #ffad24, #e99222, #df7c00);
}

.cd-hero-card__top {
  padding: 16px 20px 14px;
}

.cd-hero-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 12px;
}

.cd-hero-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(218, 155, 62, .35);
  font-size: 12px;
  font-weight: 700;
  color: #555;
}

.cd-hero-card__tag i {
  color: #e99222;
  font-size: 11px;
}

.cd-hero-card__lead {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.85;
  color: #666;
}

.cd-hero-card__lead.cd-rich {
  color: #555;
}

.cd-hero-card__lead.cd-rich p:last-child {
  margin-bottom: 0;
}

.cd-hero-card__divider {
  height: 1px;
  margin: 12px 0 14px;
  background: rgba(218, 155, 62, .22);
}

.cd-hero-card__badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffad24, #df7c00);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.cd-hero-card__title {
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 900;
  line-height: 1.5;
  color: #222;
}

.cd-hero-card__media {
  position: relative;
  margin: 0 16px;
  width: calc(100% - 32px);
  height: 340px;
  flex-shrink: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #1a1208;
  border: 2px solid rgba(232, 179, 107, .55);
  box-shadow: 0 18px 40px rgba(69, 44, 15, .18), inset 0 0 0 1px rgba(255, 255, 255, .15);
}

.cd-hero-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1.03);
  transition: transform .6s ease;
}

.cd-hero-card--visual:hover .cd-hero-card__media img {
  transform: scale(1.07);
}

.cd-hero-card__media-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgba(255, 255, 255, .18) 0%, transparent 42%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.cd-hero-card__media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(10, 8, 5, .55) 100%);
  pointer-events: none;
  z-index: 1;
}

.cd-hero-card__media-badges {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.cd-hero-card__ribbon {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 7px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #e53935, #c62828);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(229, 57, 53, .45);
}

.cd-hero-card__float-chip {
  position: absolute;
  bottom: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  color: #333;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
}

.cd-hero-card__float-chip i {
  color: #e99222;
}

.cd-hero-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 20px 18px;
}

.cd-hero-card__chips span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(218, 155, 62, .28);
  font-size: 12px;
  font-weight: 700;
  color: #444;
}

.cd-hero-card__chips i {
  color: #e99222;
}

.cd-hero-card__chip--price {
  background: linear-gradient(135deg, #181818, #050505) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.cd-hero-card__chip--price i {
  color: #ffcc80 !important;
}

.cd-hero-card--info {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 22px;
  display: flex;
  align-items: flex-start;
}

.cd-hero-card__facts {
  margin: 0;
  width: 100%;
  display: grid;
  gap: 0;
}

.cd-hero-card__fact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px dashed rgba(218, 155, 62, .22);
  font-size: 14px;
}

.cd-hero-card__fact:last-child {
  border-bottom: none;
}

.cd-hero-card__fact dt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #888;
  font-weight: 600;
}

.cd-hero-card__fact dt i {
  color: #e99222;
  width: 16px;
  text-align: center;
}

.cd-hero-card__fact dd {
  margin: 0;
  color: #222;
  font-weight: 800;
  text-align: left;
  line-height: 1.6;
}

.cd-hero-card__fact--price dd {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.cd-hero-card__discount {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #e53935, #c62828);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.cd-hero-card__price-old {
  display: block;
  font-size: 12px;
  color: #d32f2f;
  text-decoration: line-through;
  font-weight: 700;
}

.cd-hero-card__price-new {
  display: block;
  font-size: 15px;
  color: #2e7d32;
  font-weight: 900;
}

.cd-page-aside {
  position: static;
  width: 100%;
}

.cd-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #888;
}

.cd-breadcrumb a {
  color: #888;
  text-decoration: none;
}

.cd-breadcrumb a:hover {
  color: #e99222;
}

.cd-hero__discount {
  position: absolute;
  bottom: 10px;
  left: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #e53935, #c62828);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(229, 57, 53, .35);
  z-index: 1;
}

.cd-affix {
  flex-shrink: 0;
  width: 100%;
}

.cd-affix__rows {
  margin: 0 0 16px;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(218, 155, 62, .2);
}

.cd-affix__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  font-size: 13px;
}

.cd-affix__row dt {
  color: #888;
  font-weight: 600;
  margin: 0;
  flex-shrink: 0;
}

.cd-affix__row dd {
  margin: 0;
  color: #222;
  font-weight: 700;
  text-align: left;
  line-height: 1.6;
}

.cd-body {
  padding-bottom: 0;
}

.cd-buy__label {
  display: block;
  font-size: 12px;
  color: #888;
  margin-bottom: 6px;
}

.cd-panel {
  background: #fff;
  border: 1px solid rgba(218, 155, 62, .28);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 22px;
  box-shadow: 0 10px 28px rgba(69, 44, 15, .06);
}

.cd-panel__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}

.cd-panel__head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  color: #222;
}

.cd-panel__head p {
  margin: 6px 0 0;
  font-size: 13px;
  color: #888;
}

.cd-panel__icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255, 173, 36, .18), rgba(223, 124, 0, .12));
  color: #df7c00;
  flex-shrink: 0;
}

.cd-rich {
  color: #555;
  font-size: 15px;
  line-height: 2;
}

.cd-class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.cd-class-card {
  text-align: right;
  border: 1.5px solid rgba(218, 155, 62, .35);
  border-radius: 16px;
  background: linear-gradient(180deg, #fff 0%, #fdf9f2 100%);
  padding: 18px;
  cursor: pointer;
  transition: .25s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cd-class-card:hover {
  transform: translateY(-3px);
  border-color: #e99222;
  box-shadow: 0 12px 24px rgba(233, 146, 34, .12);
}

.cd-class-card.is-active {
  border-color: #e99222;
  background: linear-gradient(180deg, #fff8eb 0%, #fff 100%);
  box-shadow: 0 0 0 3px rgba(233, 146, 34, .15);
}

.cd-class-card__title {
  font-size: 16px;
  font-weight: 900;
  color: #222;
}

.cd-class-card__date,
.cd-class-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #666;
}

.cd-class-card__date i,
.cd-class-card__meta i {
  color: #e99222;
  width: 16px;
}

.cd-sessions {
  display: grid;
  gap: 10px;
}

.cd-session-acc {
  border-radius: 16px;
  border: 1px solid rgba(218, 155, 62, .22);
  background: linear-gradient(180deg, #fff 0%, #fdfbf7 100%);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.cd-session-acc.is-open {
  border-color: rgba(233, 146, 34, .45);
  box-shadow: 0 10px 28px rgba(233, 146, 34, .1);
}

.cd-session-acc__head {
  width: 100%;
  display: grid;
  grid-template-columns: 52px 1fr 36px;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border: 0;
  background: transparent;
  text-align: right;
  cursor: pointer;
  transition: background .2s ease;
}

.cd-session-acc__head:hover {
  background: rgba(233, 146, 34, .06);
}

.cd-session-acc__num {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #181818, #050505);
  color: #fff;
  font-weight: 900;
  font-size: 18px;
  flex-shrink: 0;
}

.cd-session-acc.is-open .cd-session-acc__num {
  background: linear-gradient(135deg, #ffad24, #df7c00);
}

.cd-session-acc__summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.cd-session-acc__title {
  font-size: 16px;
  font-weight: 900;
  color: #222;
  line-height: 1.5;
}

.cd-session-acc__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #666;
}

.cd-session-acc__meta i {
  color: #e99222;
}

.cd-session-acc__chevron {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(233, 146, 34, .1);
  color: #e99222;
  transition: transform .3s ease, background .2s ease;
}

.cd-session-acc.is-open .cd-session-acc__chevron {
  transform: rotate(180deg);
  background: rgba(233, 146, 34, .18);
}

.cd-session-acc__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}

.cd-session-acc__body.is-open {
  grid-template-rows: 1fr;
}

.cd-session-acc__body-inner {
  overflow: hidden;
}

.cd-session-acc__details {
  padding: 0 18px 18px;
  margin-right: 66px;
  border-top: 1px dashed rgba(218, 155, 62, .25);
  padding-top: 16px;
}

.cd-session-acc__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.cd-session-acc__fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(218, 155, 62, .15);
}

.cd-session-acc__fact-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #888;
}

.cd-session-acc__fact-label i {
  color: #e99222;
}

.cd-session-acc__fact span:last-child {
  font-size: 14px;
  font-weight: 700;
  color: #333;
}

.cd-session-acc__desc {
  padding: 16px 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(218, 155, 62, .12);
  font-size: 14px;
  line-height: 1.9;
  color: #444;
}

.cd-session-acc__desc.cd-rich p:last-child {
  margin-bottom: 0;
}

.cd-session-acc__empty {
  margin: 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(233, 146, 34, .06);
  color: #888;
  font-size: 13px;
  text-align: center;
}

.cd-session {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  padding: 16px;
  border-radius: 14px;
  background: #fdfbf7;
  border: 1px solid rgba(218, 155, 62, .18);
}

.cd-session__num {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #181818, #050505);
  color: #fff;
  font-weight: 900;
  font-size: 18px;
}

.cd-session__body h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
}

.cd-session__body p {
  margin: 0;
  font-size: 13px;
  color: #666;
}

.cd-session__body i {
  color: #e99222;
  margin-left: 4px;
}

.cd-session__sep {
  margin: 0 6px;
  color: #bbb;
}

.cd-instructors {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.cd-instructor {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 360px;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff 0%, #fdfbf7 100%);
  border: 1px solid rgba(218, 155, 62, .25);
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(69, 44, 15, .06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.cd-instructor:hover {
  transform: translateY(-2px);
  border-color: rgba(233, 146, 34, .4);
  box-shadow: 0 14px 32px rgba(233, 146, 34, .12);
}

.cd-instructor__body {
  display: flex;
  gap: 16px;
  padding: 18px 18px 16px;
}

.cd-instructor__avatar {
  width: 88px;
  height: 88px;
  border-radius: 18px;
  object-fit: cover;
  border: 2px solid #e8b36b;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(233, 146, 34, .18);
}

.cd-instructor__content {
  flex: 1;
  min-width: 0;
}

.cd-instructor__content h3 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 900;
  color: #222;
  line-height: 1.45;
}

.cd-instructor__exp {
  margin: 0 0 10px;
  font-size: 12px;
  color: #e99222;
  font-weight: 700;
}

.cd-skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cd-skill-tags span {
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(218, 155, 62, .35);
  font-size: 12px;
  color: #555;
}

.cd-instructor__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 15px 18px;
  border: 0;
  border-top: 1px solid rgba(218, 155, 62, .22);
  background: linear-gradient(135deg, #181818 0%, #050505 100%);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
  position: relative;
  overflow: hidden;
}

.cd-instructor__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .12) 50%, transparent 70%);
  transform: translateX(120%);
  transition: transform .55s ease;
}

.cd-instructor__cta:hover::before {
  transform: translateX(-120%);
}

.cd-instructor__cta i:first-child {
  color: #ffad24;
  font-size: 15px;
}

.cd-instructor__cta span {
  letter-spacing: .2px;
}

.cd-instructor__cta i:last-child {
  font-size: 12px;
  opacity: .85;
  transition: transform .25s ease;
}

.cd-instructor__cta:hover {
  background: linear-gradient(135deg, #ffad24 0%, #df7c00 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}

.cd-instructor__cta:hover i:first-child {
  color: #fff;
}

.cd-instructor__cta:hover i:last-child {
  transform: translateX(-4px);
}

.cd-payment-plans {
  display: grid;
  gap: 14px;
}

.cd-payment-plan {
  border-radius: 18px;
  border: 1px solid rgba(218, 155, 62, .22);
  background: linear-gradient(180deg, #fff 0%, #fdfbf7 100%);
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(69, 44, 15, .05);
}

.cd-payment-plan--installment {
  border-color: rgba(233, 146, 34, .28);
}

.cd-payment-plan__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}

.cd-payment-plan__info h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 900;
  color: #222;
}

.cd-payment-plan__type {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(233, 146, 34, .1);
  border: 1px solid rgba(233, 146, 34, .25);
  color: #c56f00;
  font-size: 12px;
  font-weight: 800;
}

.cd-payment-plan--full .cd-payment-plan__type {
  background: rgba(24, 24, 24, .06);
  border-color: rgba(24, 24, 24, .12);
  color: #444;
}

.cd-payment-plan__amount {
  text-align: left;
  flex-shrink: 0;
}

.cd-payment-plan__amount span {
  display: block;
  font-size: 12px;
  color: #888;
  margin-bottom: 4px;
}

.cd-payment-plan__amount strong {
  font-size: 18px;
  font-weight: 900;
  color: #e99222;
  white-space: nowrap;
}

.cd-payment-plan__installments {
  border-top: 1px dashed rgba(218, 155, 62, .25);
  padding: 14px 20px 18px;
  background: rgba(255, 255, 255, .65);
}

.cd-payment-plan__installments-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 800;
  color: #333;
}

.cd-payment-plan__installments-head i {
  color: #e99222;
}

.cd-payment-plan__installments-head small {
  margin-right: auto;
  font-size: 12px;
  font-weight: 700;
  color: #888;
}

.cd-payment-plan__installments-list {
  display: grid;
  gap: 10px;
}

.cd-payment-plan__installment {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(218, 155, 62, .16);
}

.cd-payment-plan__installment-num {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #181818, #050505);
  color: #fff;
  font-weight: 900;
  font-size: 16px;
}

.cd-payment-plan__installment-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
}

.cd-payment-plan__installment-body strong {
  font-size: 15px;
  font-weight: 900;
  color: #222;
}

.cd-payment-plan__installment-body span {
  font-size: 12px;
  color: #777;
  font-weight: 700;
}

.cd-media-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.cd-media-grid__item {
  position: relative;
  border: none;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 1;
  cursor: pointer;
}

.cd-placeholder {
  text-align: center;
  padding: 32px 16px;
  border: 1px dashed rgba(218, 155, 62, .4);
  border-radius: 14px;
  background: #fdfbf7;
}

.cd-placeholder i {
  font-size: 30px;
  color: #e99222;
  margin-bottom: 10px;
}

.cd-placeholder p {
  margin: 0;
  color: #666;
}

.cd-placeholder small {
  display: block;
  margin-top: 6px;
  color: #999;
  font-size: 12px;
}

.cd-related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.cd-buy {
  background: #fff;
  border: 1px solid rgba(218, 155, 62, .4);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 32px rgba(69, 44, 15, .1);
  width: 100%;
  box-sizing: border-box;
}

.cd-buy__old {
  display: block;
  font-size: 14px;
  color: #d32f2f;
  text-decoration: line-through;
  font-weight: 700;
}

.cd-buy__new {
  display: block;
  font-size: 22px;
  font-weight: 900;
  color: #2e7d32;
  margin: 2px 0 14px;
}

.cd-buy__new--solo {
  color: #222;
}

.cd-buy__selected {
  padding: 14px;
  border-radius: 14px;
  background: #fdf9f2;
  border: 1px solid rgba(218, 155, 62, .25);
  margin-bottom: 16px;
}

.cd-buy__selected-label,
.cd-buy__plans-label {
  display: block;
  font-size: 12px;
  color: #888;
  margin-bottom: 6px;
}

.cd-buy__selected strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}

.cd-buy__selected small {
  color: #777;
  font-size: 12px;
}

.cd-buy__plans {
  margin-bottom: 16px;
}

.cd-plan-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cd-plan-chip {
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid #e8b36b;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  color: #444;
}

.cd-buy__btn {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease, color .25s ease;
}

.cd-buy__btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.cd-buy__btn--primary {
  background: linear-gradient(135deg, #181818, #050505);
  color: #fff;
  margin-bottom: 10px;
}

.cd-buy__btn--ghost {
  background: #fff;
  color: #333;
  border: 1px solid #e8b36b;
  margin-bottom: 14px;
}

.cd-buy__btn--cart {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.cd-buy__btn--cart::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(232, 179, 107, .18), rgba(233, 146, 34, .1));
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.cd-buy__btn--cart:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(233, 146, 34, .28);
  border-color: #e99222;
  color: #b86a0a;
  background: #fffaf3;
}

.cd-buy__btn--cart:hover::before {
  opacity: 1;
}

.cd-buy__btn--cart:hover i {
  animation: cd-cart-bounce .55s ease;
}

.cd-buy__btn--cart:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(233, 146, 34, .22);
}

@keyframes cd-cart-bounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-4px) scale(1.12); }
  70% { transform: translateY(-1px) scale(1.05); }
}

.cd-buy__btn--in-cart,
.cd-buy__btn--in-cart:disabled {
  background: #f0faf4;
  color: #198754;
  border-color: #198754;
  opacity: 1;
  cursor: default;
}

.cd-buy__btn--enrolled {
  background: #eef6ff;
  color: #0d6efd;
  border: 1px solid rgba(13, 110, 253, .35);
  margin-bottom: 14px;
  cursor: default;
}

.cd-buy__btn--register:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(24, 24, 24, .28);
}

.cd-buy__alert {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(220, 53, 69, .08);
  color: #c62828;
  font-size: .84rem;
  font-weight: 700;
}

.cd-share {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid #f0e6d6;
}

.cd-share button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #e8b36b;
  background: #fff;
  color: #555;
  cursor: pointer;
  transition: .2s;
}

.cd-share button:hover {
  background: #e99222;
  border-color: #e99222;
  color: #fff;
}

@media (max-width: 991px) {
  .cd-page-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .cd-page-content,
  .cd-page-side {
    display: contents;
  }

  .cd-page-side {
    position: static;
  }

  .cd-hero-card--visual {
    order: 1;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 16px 40px rgba(69, 44, 15, .12);
  }

  .cd-hero-card__top {
    padding: 16px 18px 12px;
  }

  .cd-hero-card__media {
    margin: 0 14px;
    width: calc(100% - 28px);
    height: 280px;
    border-radius: 16px;
  }

  .cd-hero-card__title {
    font-size: 1.65rem;
    line-height: 1.45;
  }

  .cd-hero-card__chips {
    padding: 14px 18px 16px;
  }

  .cd-hero-card--info {
    order: 2;
    width: 100%;
  }

  .cd-main {
    order: 3;
  }

  .cd-page-aside {
    order: 4;
    width: 100%;
  }

  .cd-media-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cd-related {
    grid-template-columns: 1fr;
  }

  .cd-session-acc__head {
    grid-template-columns: 44px 1fr 32px;
    gap: 10px;
    padding: 14px;
  }

  .cd-session-acc__num {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }

  .cd-session-acc__details {
    margin-right: 0;
    padding: 14px 14px 16px;
  }

  .cd-session-acc__facts {
    grid-template-columns: 1fr;
  }

  .cd-payment-plan__head {
    flex-direction: column;
    align-items: stretch;
  }

  .cd-payment-plan__amount {
    text-align: right;
    padding-top: 10px;
    border-top: 1px dashed rgba(218, 155, 62, .2);
  }

  .cd-payment-plan__installment-body {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================
   SITE CART PAGE
   ============================================ */

.cart-page {
  padding: 36px 0 64px;
  background:
    radial-gradient(circle at top right, rgba(255, 159, 31, .08), transparent 28%),
    linear-gradient(180deg, #fffaf3 0%, #fff 42%, #fff 100%);
  min-height: calc(100vh - 76px);
}

.cart-page__header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
}

.cart-page__header-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff9f1f, #e87500);
  color: #fff;
  box-shadow: 0 12px 28px rgba(242, 131, 0, .28);
  font-size: 1.6rem;
}

.cart-page__header h1 {
  margin: 0 0 6px;
  font-size: 1.9rem;
  font-weight: 900;
  color: #181818;
}

.cart-page__header p {
  margin: 0;
  color: #777;
  font-size: .95rem;
}

.cart-page__state,
.cart-page__empty {
  background: #fff;
  border: 1px solid rgba(218, 155, 62, .28);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(69, 44, 15, .06);
  padding: 48px 24px;
  text-align: center;
}

.cart-page__state i,
.cart-page__empty-icon i {
  font-size: 2rem;
  color: #e99222;
}

.cart-page__state p,
.cart-page__empty p {
  margin: 14px 0 0;
  color: #666;
}

.cart-page__state--error i {
  color: #dc3545;
}

.cart-page__empty-icon {
  width: 88px;
  height: 88px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 159, 31, .1);
}

.cart-page__empty h2 {
  margin: 0 0 8px;
  font-size: 1.35rem;
  font-weight: 900;
}

.cart-page__empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff9f1f, #e87500);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(242, 131, 0, .24);
  transition: transform .25s ease, box-shadow .25s ease;
}

.cart-page__empty-btn:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(242, 131, 0, .3);
}

.cart-table-wrap {
  background: #fff;
  border: 1px solid rgba(218, 155, 62, .28);
  border-radius: 22px;
  box-shadow: 0 14px 36px rgba(69, 44, 15, .07);
  overflow: hidden;
}

.cart-table-scroll {
  overflow-x: auto;
}

.cart-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 860px;
}

.cart-table thead {
  background: linear-gradient(135deg, #181818, #050505);
}

.cart-table th {
  padding: 16px 18px;
  color: rgba(255, 255, 255, .92);
  font-size: .86rem;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.cart-table td {
  padding: 18px;
  border-bottom: 1px solid #f3eadb;
  vertical-align: middle;
  color: #333;
  font-size: .92rem;
}

.cart-table tbody tr {
  transition: background .2s ease;
}

.cart-table tbody tr:hover {
  background: #fffaf3;
}

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

.cart-table__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 159, 31, .12);
  color: #c6760a;
  font-weight: 900;
}

.cart-table__course {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 240px;
}

.cart-table__course img {
  width: 72px;
  height: 54px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(218, 155, 62, .25);
  flex-shrink: 0;
}

.cart-table__course strong {
  font-size: .95rem;
  line-height: 1.6;
}

.cart-table__badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 159, 31, .1);
  color: #a86408;
  font-size: .82rem;
  font-weight: 800;
}

.cart-table__price {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cart-table__price-old {
  color: #999;
  text-decoration: line-through;
  font-size: .82rem;
}

.cart-table__price-new {
  color: #198754;
  font-weight: 900;
}

.cart-table__discount {
  display: inline-block;
  width: fit-content;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(220, 53, 69, .1);
  color: #c62828;
  font-size: .74rem;
  font-weight: 800;
}

.cart-table__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(218, 155, 62, .45);
  color: #333;
  text-decoration: none;
  font-size: .84rem;
  font-weight: 800;
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}

.cart-table__action:hover {
  color: #fff;
  border-color: #e99222;
  background: linear-gradient(135deg, #ff9f1f, #e87500);
  transform: translateY(-1px);
}

.cart-table__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.cart-table__action--primary {
  color: #fff;
  border-color: #e99222;
  background: linear-gradient(135deg, #ff9f1f, #e87500);
  box-shadow: 0 6px 16px rgba(242, 131, 0, .22);
}

.cart-table__action--primary:hover {
  box-shadow: 0 10px 22px rgba(242, 131, 0, .3);
}

.cart-table__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: #fffaf3;
  border-top: 1px solid #f0e6d6;
  color: #666;
  font-size: .86rem;
  font-weight: 700;
}

.cart-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px;
  border-top: 1px solid #f0e6d6;
  background: #fff;
}

.cart-pagination__btn,
.cart-pagination__page {
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(218, 155, 62, .35);
  background: #fff;
  color: #444;
  font-size: .86rem;
  font-weight: 800;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.cart-pagination__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
}

.cart-pagination__btn:not(:disabled):hover,
.cart-pagination__page:not(.is-active):hover {
  border-color: #e99222;
  color: #c6760a;
  background: #fffaf3;
}

.cart-pagination__btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.cart-pagination__pages {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.cart-pagination__page {
  width: 40px;
  padding: 0;
}

.cart-pagination__page.is-active {
  color: #fff;
  border-color: #e99222;
  background: linear-gradient(135deg, #ff9f1f, #e87500);
  box-shadow: 0 8px 18px rgba(242, 131, 0, .24);
}

@media (max-width: 991.98px) {
  .cart-page {
    padding-top: 24px;
    min-height: calc(100vh - 68px);
  }

  .cart-page__header {
    align-items: flex-start;
  }

  .cart-table {
    min-width: 100%;
  }

  .cart-table thead {
    display: none;
  }

  .cart-table tbody tr {
    display: block;
    padding: 16px;
    border-bottom: 1px solid #f3eadb;
  }

  .cart-table td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: none;
  }

  .cart-table td::before {
    content: attr(data-label);
    color: #888;
    font-size: .82rem;
    font-weight: 800;
    flex-shrink: 0;
  }

  .cart-table__course {
    flex-direction: column;
    align-items: flex-end;
    text-align: left;
  }

  .cart-table__footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .cart-table__actions {
    align-items: flex-end;
    width: 100%;
  }
}

/* ============================================
   SITE ENROLL CHECKOUT PAGE
   ============================================ */

.enroll-page {
  padding: 32px 0 72px;
  background:
    radial-gradient(circle at top right, rgba(255, 159, 31, .08), transparent 28%),
    linear-gradient(180deg, #fffaf3 0%, #fff 40%, #fff 100%);
  min-height: calc(100vh - 76px);
}

.enroll-page__state {
  background: #fff;
  border: 1px solid rgba(218, 155, 62, .28);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(69, 44, 15, .06);
  padding: 48px 24px;
  text-align: center;
}

.enroll-page__state i {
  font-size: 2rem;
  color: #e99222;
}

.enroll-page__state--error i {
  color: #dc3545;
}

.enroll-page__state p {
  margin: 14px 0 0;
  color: #666;
}

.enroll-page__back-link,
.enroll-summary__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  color: #888;
  text-decoration: none;
  font-weight: 700;
  font-size: .88rem;
}

.enroll-page__back-link:hover,
.enroll-summary__back:hover {
  color: #e99222;
}

.enroll-page__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  color: #888;
  font-size: .88rem;
  font-weight: 700;
}

.enroll-page__breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #888;
  text-decoration: none;
}

.enroll-page__breadcrumb a:hover {
  color: #e99222;
}

.enroll-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}

.enroll-page__main {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.enroll-course-card {
  display: flex;
  gap: 20px;
  padding: 22px;
  border-radius: 22px;
  border: 1px solid rgba(218, 155, 62, .28);
  background: #fff;
  box-shadow: 0 12px 32px rgba(69, 44, 15, .07);
}

.enroll-course-card__image {
  width: 160px;
  height: 120px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(218, 155, 62, .25);
  flex-shrink: 0;
}

.enroll-course-card__body h1 {
  margin: 8px 0 4px;
  font-size: 1rem;
  font-weight: 800;
  color: #888;
}

.enroll-course-card__body h2 {
  margin: 0 0 10px;
  font-size: 1.55rem;
  font-weight: 900;
  color: #181818;
  line-height: 1.5;
}

.enroll-course-card__badge {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 159, 31, .12);
  color: #a86408;
  font-size: .78rem;
  font-weight: 800;
}

.enroll-course-card__discount {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(220, 53, 69, .08);
  color: #c62828;
  font-size: .82rem;
  font-weight: 800;
}

.enroll-panel {
  background: #fff;
  border: 1px solid rgba(218, 155, 62, .28);
  border-radius: 22px;
  box-shadow: 0 10px 28px rgba(69, 44, 15, .06);
  overflow: hidden;
}

.enroll-panel__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  border-bottom: 1px solid #f3eadb;
  background: linear-gradient(180deg, #fffaf3, #fff);
}

.enroll-panel__step {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff9f1f, #e87500);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(242, 131, 0, .24);
}

.enroll-panel__head h3 {
  margin: 0 0 4px;
  font-size: 1.1rem;
  font-weight: 900;
}

.enroll-panel__head p {
  margin: 0;
  color: #777;
  font-size: .88rem;
}

.enroll-panel__empty {
  padding: 36px 22px;
  text-align: center;
  color: #777;
}

.enroll-panel__empty i {
  font-size: 2rem;
  color: #e99222;
  margin-bottom: 10px;
}

.enroll-class-list,
.enroll-plan-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px 22px;
}

.enroll-class-card,
.enroll-plan-card {
  position: relative;
  display: block;
  cursor: pointer;
}

.enroll-class-card input,
.enroll-plan-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.enroll-class-card__content,
.enroll-plan-card__content {
  border: 1px solid rgba(218, 155, 62, .28);
  border-radius: 18px;
  padding: 18px;
  background: #fff;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease, background .25s ease;
}

.enroll-class-card:hover .enroll-class-card__content,
.enroll-plan-card:hover .enroll-plan-card__content {
  border-color: rgba(233, 146, 34, .55);
  box-shadow: 0 10px 24px rgba(69, 44, 15, .07);
}

.enroll-class-card.is-selected .enroll-class-card__content,
.enroll-plan-card.is-selected .enroll-plan-card__content {
  border-color: #e99222;
  background: #fffaf3;
  box-shadow: 0 12px 28px rgba(242, 131, 0, .14);
}

.enroll-class-card.is-disabled .enroll-class-card__content {
  opacity: .82;
}

.enroll-class-card__radio,
.enroll-plan-card__radio {
  position: absolute;
  top: 22px;
  left: 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(218, 155, 62, .55);
  background: #fff;
}

.enroll-class-card.is-selected .enroll-class-card__radio,
.enroll-plan-card.is-selected .enroll-plan-card__radio {
  border-color: #e99222;
  background: radial-gradient(circle at center, #e99222 0 6px, #fff 6px 100%);
}

.enroll-class-card__content,
.enroll-plan-card__content {
  padding-right: 18px;
  padding-left: 52px;
}

.enroll-class-card__top,
.enroll-plan-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.enroll-class-card__top strong,
.enroll-plan-card__top strong {
  font-size: 1rem;
  font-weight: 900;
  color: #222;
}

.enroll-class-card__selected-tag {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(25, 135, 84, .12);
  color: #198754;
  font-size: .74rem;
  font-weight: 800;
}

.enroll-class-card__meta,
.enroll-class-card__register {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  color: #666;
  font-size: .84rem;
  margin-bottom: 10px;
}

.enroll-class-card__meta span,
.enroll-class-card__register span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.enroll-class-card__status {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: .84rem;
  font-weight: 800;
}

.enroll-class-card__status.is-open {
  background: rgba(25, 135, 84, .08);
  color: #198754;
}

.enroll-class-card__status.is-closed {
  background: rgba(220, 53, 69, .08);
  color: #c62828;
}

.enroll-plan-card__type {
  display: block;
  margin-top: 4px;
  color: #888;
  font-size: .82rem;
  font-weight: 700;
}

.enroll-plan-card__price {
  text-align: left;
}

.enroll-plan-card__old {
  display: block;
  color: #999;
  text-decoration: line-through;
  font-size: .82rem;
}

.enroll-plan-card__new {
  display: block;
  color: #198754;
  font-size: 1.05rem;
  font-weight: 900;
}

.enroll-installments {
  margin-top: 14px;
  border-top: 1px dashed rgba(218, 155, 62, .25);
  padding-top: 14px;
}

.enroll-installments__head {
  margin-bottom: 10px;
  color: #777;
  font-size: .82rem;
  font-weight: 800;
}

.enroll-installments__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.enroll-installment {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #f0e6d6;
  font-size: .84rem;
}

.enroll-installment__order {
  font-weight: 900;
  color: #444;
}

.enroll-installment__due {
  color: #777;
}

.enroll-installment__amount {
  font-weight: 900;
  color: #198754;
  white-space: nowrap;
}

.enroll-installment__amount s {
  color: #aaa;
  margin-left: 6px;
  font-weight: 700;
}

.enroll-summary {
  position: sticky;
  top: 92px;
}

.enroll-summary__card {
  background: #fff;
  border: 1px solid rgba(218, 155, 62, .28);
  border-radius: 22px;
  box-shadow: 0 14px 36px rgba(69, 44, 15, .08);
  padding: 22px;
}

.enroll-summary__card h3 {
  margin: 0 0 18px;
  font-size: 1.15rem;
  font-weight: 900;
}

.enroll-summary__rows {
  margin: 0;
}

.enroll-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed #f0e6d6;
}

.enroll-summary__row dt {
  color: #888;
  font-size: .84rem;
  font-weight: 700;
}

.enroll-summary__row dd {
  margin: 0;
  text-align: left;
  color: #333;
  font-size: .88rem;
  font-weight: 800;
}

.enroll-summary__row--total dd {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.enroll-summary__old {
  color: #999;
  text-decoration: line-through;
  font-size: .82rem;
  font-weight: 700;
}

.enroll-summary__total {
  color: #198754;
  font-size: 1.1rem;
  font-weight: 900;
}

.enroll-summary__divider {
  height: 1px;
  background: #f0e6d6;
  margin: 8px 0;
}

.enroll-summary__installments {
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  background: #fffaf3;
  border: 1px solid #f0e6d6;
}

.enroll-summary__installments strong {
  display: block;
  margin-bottom: 10px;
  font-size: .88rem;
}

.enroll-summary__installment {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  font-size: .84rem;
  color: #555;
  font-weight: 700;
}

.enroll-summary__alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(220, 53, 69, .08);
  color: #c62828;
  font-size: .84rem;
  font-weight: 700;
}

.enroll-summary__pay {
  width: 100%;
  min-height: 50px;
  margin-top: 18px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff9f1f, #e87500);
  color: #fff;
  font-size: .95rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 10px 24px rgba(242, 131, 0, .28);
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}

.enroll-summary__pay:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(242, 131, 0, .34);
}

.enroll-summary__pay:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}

.enroll-summary__back {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

@media (max-width: 991.98px) {
  .enroll-page {
    padding-top: 22px;
    min-height: calc(100vh - 68px);
  }

  .enroll-page__layout {
    grid-template-columns: 1fr;
  }

  .enroll-summary {
    position: static;
  }

  .enroll-course-card {
    flex-direction: column;
  }

  .enroll-course-card__image {
    width: 100%;
    height: 200px;
  }

  .enroll-class-card__top,
  .enroll-plan-card__top {
    flex-direction: column;
  }

  .enroll-installment {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ============================================
   SITE INVOICE PAGES
   ============================================ */

.invoice-page,
.invoice-payments-page {
  padding: 32px 0 72px;
  background:
    radial-gradient(circle at top right, rgba(255, 159, 31, .08), transparent 28%),
    linear-gradient(180deg, #fffaf3 0%, #fff 40%, #fff 100%);
  min-height: calc(100vh - 76px);
}

.invoice-page__state {
  background: #fff;
  border: 1px solid rgba(218, 155, 62, .28);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(69, 44, 15, .06);
  padding: 48px 24px;
  text-align: center;
}

.invoice-page__state i {
  font-size: 2rem;
  color: #e99222;
}

.invoice-page__state--error i {
  color: #dc3545;
}

.invoice-page__state p {
  margin: 14px 0 0;
  color: #666;
}

.invoice-page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding: 24px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(218, 155, 62, .28);
  box-shadow: 0 12px 32px rgba(69, 44, 15, .07);
}

.invoice-page__header-main {
  display: flex;
  align-items: center;
  gap: 16px;
}

.invoice-page__icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #181818, #050505);
  color: #fff;
  font-size: 1.6rem;
}

.invoice-page__label {
  display: block;
  color: #888;
  font-size: .84rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.invoice-page__header h1 {
  margin: 0 0 6px;
  font-size: 1.7rem;
  font-weight: 900;
}

.invoice-page__header p {
  margin: 0;
  color: #777;
  font-size: .9rem;
}

.invoice-page__status {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 900;
  white-space: nowrap;
}

.invoice-page__status.is-paid {
  background: rgba(25, 135, 84, .12);
  color: #198754;
}

.invoice-page__status.is-partial {
  background: rgba(255, 159, 31, .14);
  color: #c6760a;
}

.invoice-page__status.is-pending {
  background: rgba(220, 53, 69, .1);
  color: #c62828;
}

.invoice-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  align-items: start;
}

.invoice-page__main {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.invoice-card {
  background: #fff;
  border: 1px solid rgba(218, 155, 62, .28);
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(69, 44, 15, .06);
  padding: 22px;
}

.invoice-card h2 {
  margin: 0 0 16px;
  font-size: 1.05rem;
  font-weight: 900;
}

.invoice-card__rows {
  margin: 0;
}

.invoice-card__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px dashed #f0e6d6;
}

.invoice-card__row:last-child {
  border-bottom: none;
}

.invoice-card__row dt {
  color: #888;
  font-size: .86rem;
  font-weight: 700;
}

.invoice-card__row dd {
  margin: 0;
  text-align: left;
  color: #333;
  font-size: .9rem;
  font-weight: 800;
}

.invoice-card__row--discount dd {
  color: #c62828;
}

.invoice-card__row--total {
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px solid #f0e6d6;
}

.invoice-card__row--total dd {
  color: #198754;
  font-size: 1.05rem;
  font-weight: 900;
}

.invoice-card__row dd.is-paid {
  color: #198754;
}

.invoice-card__row dd.is-remaining {
  color: #c6760a;
}

.invoice-card__note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fffaf3;
  color: #777;
  font-size: .86rem;
  font-weight: 700;
}

.invoice-aside-card {
  background: #fff;
  border: 1px solid rgba(218, 155, 62, .28);
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(69, 44, 15, .06);
  padding: 20px;
  margin-bottom: 16px;
}

.invoice-aside-card h3 {
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 900;
}

.invoice-aside-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff9f1f, #e87500);
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(242, 131, 0, .24);
  transition: transform .25s ease, box-shadow .25s ease;
}

.invoice-aside-card__btn:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(242, 131, 0, .3);
}

.invoice-aside-card__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  color: #888;
  text-decoration: none;
  font-size: .88rem;
  font-weight: 700;
}

.invoice-aside-card__link:hover {
  color: #e99222;
}

.invoice-aside-card--success {
  text-align: center;
  background: rgba(25, 135, 84, .06);
  border-color: rgba(25, 135, 84, .22);
}

.invoice-aside-card--success i {
  font-size: 2rem;
  color: #198754;
  margin-bottom: 8px;
}

.invoice-aside-card--success strong {
  display: block;
  margin-bottom: 8px;
  color: #198754;
}

.invoice-aside-card--success p {
  margin: 0;
  color: #666;
  font-size: .86rem;
  line-height: 1.7;
}

.invoice-payments-page__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  color: #888;
  font-size: .88rem;
  font-weight: 700;
}

.invoice-payments-page__breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #888;
  text-decoration: none;
}

.invoice-payments-page__breadcrumb a:hover {
  color: #e99222;
}

.invoice-payments-page__header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.invoice-payments-page__icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff9f1f, #e87500);
  color: #fff;
  font-size: 1.4rem;
  box-shadow: 0 10px 24px rgba(242, 131, 0, .24);
}

.invoice-payments-page__header h1 {
  margin: 0 0 4px;
  font-size: 1.6rem;
  font-weight: 900;
}

.invoice-payments-page__header p {
  margin: 0;
  color: #777;
  font-size: .9rem;
}

.invoice-payment-status {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
}

.invoice-payment-status.is-paid {
  background: rgba(25, 135, 84, .12);
  color: #198754;
}

.invoice-payment-status.is-pending {
  background: rgba(255, 159, 31, .14);
  color: #c6760a;
}

@media (max-width: 991.98px) {
  .invoice-page,
  .invoice-payments-page {
    padding-top: 22px;
    min-height: calc(100vh - 68px);
  }

  .invoice-page__header {
    flex-direction: column;
  }

  .invoice-page__layout {
    grid-template-columns: 1fr;
  }

  .invoice-payments-table {
    min-width: 100%;
  }
}