:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-primary-text-emphasis: rgb(5.2, 44, 101.2);
  --bs-secondary-text-emphasis: rgb(43.2, 46.8, 50);
  --bs-success-text-emphasis: rgb(10, 54, 33.6);
  --bs-info-text-emphasis: rgb(5.2, 80.8, 96);
  --bs-warning-text-emphasis: rgb(102, 77.2, 2.8);
  --bs-danger-text-emphasis: rgb(88, 21.2, 27.6);
  --bs-light-text-emphasis: #495057;
  --bs-dark-text-emphasis: #495057;
  --bs-primary-bg-subtle: rgb(206.6, 226, 254.6);
  --bs-secondary-bg-subtle: rgb(225.6, 227.4, 229);
  --bs-success-bg-subtle: rgb(209, 231, 220.8);
  --bs-info-bg-subtle: rgb(206.6, 244.4, 252);
  --bs-warning-bg-subtle: rgb(255, 242.6, 205.4);
  --bs-danger-bg-subtle: rgb(248, 214.6, 217.8);
  --bs-light-bg-subtle: rgb(251.5, 252, 252.5);
  --bs-dark-bg-subtle: #ced4da;
  --bs-primary-border-subtle: rgb(158.2, 197, 254.2);
  --bs-secondary-border-subtle: rgb(196.2, 199.8, 203);
  --bs-success-border-subtle: rgb(163, 207, 186.6);
  --bs-info-border-subtle: rgb(158.2, 233.8, 249);
  --bs-warning-border-subtle: rgb(255, 230.2, 155.8);
  --bs-danger-border-subtle: rgb(241, 174.2, 180.6);
  --bs-light-border-subtle: #e9ecef;
  --bs-dark-border-subtle: #adb5bd;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-font-sans-serif: thmanyahsans, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, hsla(0, 0%, 100%, 0.15), hsla(0, 0%, 100%, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg: #fff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: #000;
  --bs-emphasis-color-rgb: 0, 0, 0;
  --bs-secondary-color: rgba(33, 37, 41, 0.75);
  --bs-secondary-color-rgb: 33, 37, 41;
  --bs-secondary-bg: #e9ecef;
  --bs-secondary-bg-rgb: 233, 236, 239;
  --bs-tertiary-color: rgba(33, 37, 41, 0.5);
  --bs-tertiary-color-rgb: 33, 37, 41;
  --bs-tertiary-bg: #f8f9fa;
  --bs-tertiary-bg-rgb: 248, 249, 250;
  --bs-heading-color: inherit;
  --bs-link-color: #0d6efd;
  --bs-link-color-rgb: 13, 110, 253;
  --bs-link-decoration: underline;
  --bs-link-hover-color: rgb(10.4, 88, 202.4);
  --bs-link-hover-color-rgb: 10, 88, 202;
  --bs-code-color: #d63384;
  --bs-highlight-color: #212529;
  --bs-highlight-bg: rgb(255, 242.6, 205.4);
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-xxl: 2rem;
  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 50rem;
  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  --bs-focus-ring-width: 0.25rem;
  --bs-focus-ring-opacity: 0.25;
  --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
  --bs-form-valid-color: #198754;
  --bs-form-valid-border-color: #198754;
  --bs-form-invalid-color: #dc3545;
  --bs-form-invalid-border-color: #dc3545
}

* {
  box-sizing: border-box
}

@media(prefers-reduced-motion:no-preference) {
  :root {
    scroll-behavior: smooth
  }
}

body {
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  background-color: var(--bs-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: var(--bs-border-width) solid;
  opacity: .25
}

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

.h1,
h1 {
  font-size: calc(1.375rem + 1.5vw)
}

@media(min-width:1200px) {

  .h1,
  h1 {
    font-size: 2.5rem
  }
}

.h2,
h2 {
  font-size: calc(1.325rem + .9vw)
}

@media(min-width:1200px) {

  .h2,
  h2 {
    font-size: 2rem
  }
}

.h3,
h3 {
  font-size: calc(1.3rem + .6vw)
}

@media(min-width:1200px) {

  .h3,
  h3 {
    font-size: 1.75rem
  }
}

.h4,
h4 {
  font-size: calc(1.275rem + .3vw)
}

@media(min-width:1200px) {

  .h4,
  h4 {
    font-size: 1.5rem
  }
}

p {
  margin-top: 0;
  margin-bottom: 1rem
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit
}

ul {
  padding-left: 2rem
}

ul {
  margin-top: 0;
  margin-bottom: 1rem
}

ul ul {
  margin-bottom: 0
}

b,
strong {
  font-weight: bolder
}

.small,
small {
  font-size: .875em
}

a {
  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
  text-decoration: underline
}

a:hover {
  --bs-link-color-rgb: var(--bs-link-hover-color-rgb)
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none
}

code {
  font-family: var(--bs-font-monospace);
  font-size: 1em
}

code {
  font-size: .875em;
  color: var(--bs-code-color);
  word-wrap: break-word
}

a>code {
  color: inherit
}

img,
svg {
  vertical-align: middle
}

label {
  display: inline-block
}

button {
  border-radius: 0
}

button:focus:not(:focus-visible) {
  outline: 0
}

button,
input,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit
}

button,
select {
  text-transform: none
}

[role=button] {
  cursor: pointer
}

select {
  word-wrap: normal
}

select:disabled {
  opacity: 1
}

[type=button],
[type=reset],
[type=submit],
button {
  -webkit-appearance: button
}

[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled),
button:not(:disabled) {
  cursor: pointer
}

textarea {
  resize: vertical
}

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

summary {
  display: list-item;
  cursor: pointer
}

[hidden] {
  display: none !important
}

.container-xl {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x)*0.5);
  padding-left: calc(var(--bs-gutter-x)*0.5);
  margin-right: auto;
  margin-left: auto
}

@media(min-width:1200px) {
  .container-xl {
    max-width: 1140px
  }
}

@media(min-width:1400px) {
  .container-xl {
    max-width: 1320px
  }
}

:root {
  --bs-breakpoint-xs: 0;
  --bs-breakpoint-sm: 576px;
  --bs-breakpoint-md: 768px;
  --bs-breakpoint-lg: 992px;
  --bs-breakpoint-xl: 1200px;
  --bs-breakpoint-xxl: 1400px
}

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y)*-1);
  margin-right: calc(var(--bs-gutter-x)*-0.5);
  margin-left: calc(var(--bs-gutter-x)*-0.5)
}

.row>* {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x)*0.5);
  padding-left: calc(var(--bs-gutter-x)*0.5);
  margin-top: var(--bs-gutter-y)
}

.g-3 {
  --bs-gutter-x: 1rem
}

.g-3 {
  --bs-gutter-y: 1rem
}

.g-4 {
  --bs-gutter-x: 1.5rem
}

.g-4 {
  --bs-gutter-y: 1.5rem
}

.g-5 {
  --bs-gutter-x: 3rem
}

.g-5 {
  --bs-gutter-y: 3rem
}

@media(min-width:576px) {
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%
  }
}

@media(min-width:768px) {
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%
  }

  .col-md-10 {
    flex: 0 0 auto;
    width: 83.33333333%
  }
}

@media(min-width:992px) {
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.66666667%
  }

  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%
  }

  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%
  }

  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%
  }

  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333333%
  }
}

.btn {
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 1.5;
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-width: var(--bs-border-width);
  --bs-btn-border-color: transparent;
  --bs-btn-border-radius: 30px;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
  --bs-btn-disabled-opacity: 0.65;
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
  display: inline-block;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-family: var(--bs-btn-font-family);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  color: var(--bs-btn-color);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  background-color: var(--bs-btn-bg);
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

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

.btn:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color)
}

.btn:focus-visible {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg)
}

.btn:focus-visible {
  border-color: var(--bs-btn-hover-border-color);
  outline: 0;
  box-shadow: var(--bs-btn-focus-box-shadow)
}

.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color)
}

.btn.active:focus-visible,
.btn.show:focus-visible,
.btn:first-child:active:focus-visible,
:not(.btn-check)+.btn:active:focus-visible {
  box-shadow: var(--bs-btn-focus-box-shadow)
}

.btn.disabled,
.btn:disabled {
  color: var(--bs-btn-disabled-color);
  pointer-events: none;
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: var(--bs-btn-disabled-opacity)
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0d6efd;
  --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(11.05, 93.5, 215.05);
  --bs-btn-hover-border-color: rgb(10.4, 88, 202.4);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(10.4, 88, 202.4);
  --bs-btn-active-border-color: rgb(9.75, 82.5, 189.75);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd
}

.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: #212529;
  --bs-btn-border-color: #212529;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(66.3, 69.7, 73.1);
  --bs-btn-hover-border-color: rgb(55.2, 58.8, 62.4);
  --bs-btn-focus-shadow-rgb: 66, 70, 73;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(77.4, 80.6, 83.8);
  --bs-btn-active-border-color: rgb(55.2, 58.8, 62.4);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #212529;
  --bs-btn-disabled-border-color: #212529
}

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

.btn-lg {
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-size: 1.25rem;
  --bs-btn-border-radius: 30px
}

.fade {
  transition: opacity .15s linear
}

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

.fade:not(.show) {
  opacity: 0
}

.collapse:not(.show) {
  display: none
}

.collapsing {
  height: 0;
  overflow: hidden;
  transition: height .35s ease
}

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

.collapsing.collapse-horizontal {
  width: 0;
  height: auto;
  transition: width .35s ease
}

@media(prefers-reduced-motion:reduce) {
  .collapsing.collapse-horizontal {
    transition: none
  }
}

.navbar {
  --bs-navbar-padding-x: 0;
  --bs-navbar-padding-y: 0.5rem;
  --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 0.65);
  --bs-navbar-hover-color: rgba(var(--bs-emphasis-color-rgb), 0.8);
  --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3);
  --bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1);
  --bs-navbar-brand-padding-y: 0.3125rem;
  --bs-navbar-brand-margin-end: 1rem;
  --bs-navbar-brand-font-size: 1.25rem;
  --bs-navbar-brand-color: rgba(var(--bs-emphasis-color-rgb), 1);
  --bs-navbar-brand-hover-color: rgba(var(--bs-emphasis-color-rgb), 1);
  --bs-navbar-nav-link-padding-x: 0.5rem;
  --bs-navbar-toggler-padding-y: 0.25rem;
  --bs-navbar-toggler-padding-x: 0.75rem;
  --bs-navbar-toggler-font-size: 1.25rem;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(33, 37, 41, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15);
  --bs-navbar-toggler-border-radius: var(--bs-border-radius);
  --bs-navbar-toggler-focus-width: 0.25rem;
  --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x)
}

.navbar>.container-xl {
  display: flex;
  flex-wrap: inherit;
  align-items: center;
  justify-content: space-between
}

.navbar-brand {
  padding-top: var(--bs-navbar-brand-padding-y);
  padding-bottom: var(--bs-navbar-brand-padding-y);
  margin-right: var(--bs-navbar-brand-margin-end);
  font-size: var(--bs-navbar-brand-font-size);
  color: var(--bs-navbar-brand-color);
  text-decoration: none;
  white-space: nowrap
}

.navbar-brand:focus,
.navbar-brand:hover {
  color: var(--bs-navbar-brand-hover-color)
}

.navbar-nav {
  --bs-nav-link-padding-x: 0;
  --bs-nav-link-padding-y: 0.5rem;
  --bs-nav-link-color: var(--bs-navbar-color);
  --bs-nav-link-hover-color: var(--bs-navbar-hover-color);
  --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
  color: var(--bs-navbar-active-color)
}

.navbar-nav .dropdown-menu {
  position: static
}

.navbar-collapse {
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center
}

.navbar-toggler {
  padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
  font-size: var(--bs-navbar-toggler-font-size);
  line-height: 1;
  color: var(--bs-navbar-color);
  background-color: transparent;
  border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
  border-radius: var(--bs-navbar-toggler-border-radius);
  transition: var(--bs-navbar-toggler-transition)
}

@media(prefers-reduced-motion:reduce) {
  .navbar-toggler {
    transition: none
  }
}

.navbar-toggler:hover {
  text-decoration: none
}

.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width)
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  background-image: var(--bs-navbar-toggler-icon-bg);
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 100%
}

@media(min-width:992px) {
  .navbar-expand-lg {
    flex-wrap: nowrap;
    justify-content: flex-start
  }

  .navbar-expand-lg .navbar-nav {
    flex-direction: row
  }

  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute
  }

  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x)
  }

  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto
  }

  .navbar-expand-lg .navbar-toggler {
    display: none
  }

  .navbar-expand-lg .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none
  }

  .navbar-expand-lg .offcanvas .offcanvas-header {
    display: none
  }

  .navbar-expand-lg .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible
  }
}

.accordion {
  --bs-accordion-color: var(--bs-body-color);
  --bs-accordion-bg: var(--bs-body-bg);
  --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
  --bs-accordion-border-color: var(--bs-border-color);
  --bs-accordion-border-width: var(--bs-border-width);
  --bs-accordion-border-radius: var(--bs-border-radius);
  --bs-accordion-inner-border-radius: calc(var(--bs-border-radius) - var(--bs-border-width));
  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-btn-padding-y: 1rem;
  --bs-accordion-btn-color: var(--bs-body-color);
  --bs-accordion-btn-bg: var(--bs-accordion-bg);
  --bs-accordion-btn-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
  --bs-accordion-btn-icon-width: 1.25rem;
  --bs-accordion-btn-icon-transform: rotate(-180deg);
  --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
  --bs-accordion-btn-active-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23052C65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-accordion-body-padding-x: 1.25rem;
  --bs-accordion-body-padding-y: 1rem;
  --bs-accordion-active-color: var(--bs-primary-text-emphasis);
  --bs-accordion-active-bg: var(--bs-primary-bg-subtle)
}

.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
  font-size: 1rem;
  color: var(--bs-accordion-btn-color);
  text-align: left;
  background-color: var(--bs-accordion-btn-bg);
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  transition: var(--bs-accordion-transition)
}

@media(prefers-reduced-motion:reduce) {
  .accordion-button {
    transition: none
  }
}

.accordion-button:not(.collapsed) {
  color: var(--bs-accordion-active-color);
  background-color: var(--bs-accordion-active-bg);
  box-shadow: inset 0 calc(var(--bs-accordion-border-width)*-1) 0 var(--bs-accordion-border-color)
}

.accordion-button:not(.collapsed):after {
  background-image: var(--bs-accordion-btn-active-icon);
  transform: var(--bs-accordion-btn-icon-transform)
}

.accordion-button:after {
  flex-shrink: 0;
  width: var(--bs-accordion-btn-icon-width);
  height: var(--bs-accordion-btn-icon-width);
  margin-left: auto;
  content: "";
  background-image: var(--bs-accordion-btn-icon);
  background-repeat: no-repeat;
  background-size: var(--bs-accordion-btn-icon-width);
  transition: var(--bs-accordion-btn-icon-transition)
}

@media(prefers-reduced-motion:reduce) {
  .accordion-button:after {
    transition: none
  }
}

.accordion-button:hover {
  z-index: 2
}

.accordion-button:focus {
  z-index: 3;
  outline: 0;
  box-shadow: var(--bs-accordion-btn-focus-box-shadow)
}

.accordion-header {
  margin-bottom: 0
}

.accordion-item {
  color: var(--bs-accordion-color);
  background-color: var(--bs-accordion-bg);
  border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color)
}

.accordion-item:first-of-type {
  border-top-left-radius: var(--bs-accordion-border-radius);
  border-top-right-radius: var(--bs-accordion-border-radius)
}

.accordion-item:first-of-type>.accordion-header .accordion-button {
  border-top-left-radius: var(--bs-accordion-inner-border-radius);
  border-top-right-radius: var(--bs-accordion-inner-border-radius)
}

.accordion-item:not(:first-of-type) {
  border-top: 0
}

.accordion-item:last-of-type {
  border-bottom-right-radius: var(--bs-accordion-border-radius);
  border-bottom-left-radius: var(--bs-accordion-border-radius)
}

.accordion-item:last-of-type>.accordion-header .accordion-button.collapsed {
  border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
  border-bottom-left-radius: var(--bs-accordion-inner-border-radius)
}

.accordion-item:last-of-type>.accordion-collapse {
  border-bottom-right-radius: var(--bs-accordion-border-radius);
  border-bottom-left-radius: var(--bs-accordion-border-radius)
}

.accordion-body {
  padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x)
}

.btn-close {
  --bs-btn-close-color: #000;
  --bs-btn-close-bg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3E%3C/svg%3E");
  --bs-btn-close-opacity: 0.5;
  --bs-btn-close-hover-opacity: 0.75;
  --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-btn-close-focus-opacity: 1;
  --bs-btn-close-disabled-opacity: 0.25;
  --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: .25em;
  background: transparent var(--bs-btn-close-bg) 50%/1em auto no-repeat;
  border: 0;
  border-radius: .375rem;
  opacity: var(--bs-btn-close-opacity)
}

.btn-close,
.btn-close:hover {
  color: var(--bs-btn-close-color)
}

.btn-close:hover {
  text-decoration: none;
  opacity: var(--bs-btn-close-hover-opacity)
}

.btn-close:focus {
  outline: 0;
  box-shadow: var(--bs-btn-close-focus-shadow);
  opacity: var(--bs-btn-close-focus-opacity)
}

.btn-close.disabled,
.btn-close:disabled {
  pointer-events: none;
  user-select: none;
  opacity: var(--bs-btn-close-disabled-opacity)
}

.modal {
  --bs-modal-zindex: 1055;
  --bs-modal-width: 500px;
  --bs-modal-padding: 1rem;
  --bs-modal-margin: 0.5rem;
  --bs-modal-bg: var(--bs-body-bg);
  --bs-modal-border-color: var(--bs-border-color-translucent);
  --bs-modal-border-width: var(--bs-border-width);
  --bs-modal-border-radius: var(--bs-border-radius-lg);
  --bs-modal-box-shadow: var(--bs-box-shadow-sm);
  --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - var(--bs-border-width));
  --bs-modal-header-padding-x: 1rem;
  --bs-modal-header-padding-y: 1rem;
  --bs-modal-header-padding: 1rem 1rem;
  --bs-modal-header-border-color: var(--bs-border-color);
  --bs-modal-header-border-width: var(--bs-border-width);
  --bs-modal-title-line-height: 1.5;
  --bs-modal-footer-gap: 0.5rem;
  --bs-modal-footer-border-color: var(--bs-border-color);
  --bs-modal-footer-border-width: var(--bs-border-width);
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-modal-zindex);
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: var(--bs-modal-margin);
  pointer-events: none
}

.modal.fade .modal-dialog {
  transition: transform .3s ease-out;
  transform: translateY(-50px)
}

@media(prefers-reduced-motion:reduce) {
  .modal.fade .modal-dialog {
    transition: none
  }
}

.modal.show .modal-dialog {
  transform: none
}

.modal.modal-static .modal-dialog {
  transform: scale(1.02)
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - var(--bs-modal-margin)*2)
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--bs-modal-color);
  pointer-events: auto;
  background-color: var(--bs-modal-bg);
  background-clip: padding-box;
  border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
  border-radius: var(--bs-modal-border-radius);
  outline: 0
}

.modal-backdrop {
  --bs-backdrop-zindex: 1050;
  --bs-backdrop-bg: #000;
  --bs-backdrop-opacity: 0.5;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-backdrop-zindex);
  width: 100vw;
  height: 100vh;
  background-color: var(--bs-backdrop-bg)
}

.modal-backdrop.fade {
  opacity: 0
}

.modal-backdrop.show {
  opacity: var(--bs-backdrop-opacity)
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: var(--bs-modal-padding)
}

@media(min-width:576px) {
  .modal {
    --bs-modal-margin: 1.75rem;
    --bs-modal-box-shadow: var(--bs-box-shadow)
  }

  .modal-dialog {
    max-width: var(--bs-modal-width);
    margin-right: auto;
    margin-left: auto
  }
}

@media(min-width:992px) {
  .modal-lg {
    --bs-modal-width: 800px
  }
}

@media(max-width:575.98px) {
  .modal-fullscreen-sm-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0
  }

  .modal-fullscreen-sm-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0
  }

  .modal-fullscreen-sm-down .modal-body {
    overflow-y: auto
  }
}

.offcanvas {
  --bs-offcanvas-zindex: 1045;
  --bs-offcanvas-width: 400px;
  --bs-offcanvas-height: 30vh;
  --bs-offcanvas-padding-x: 1rem;
  --bs-offcanvas-padding-y: 1rem;
  --bs-offcanvas-color: var(--bs-body-color);
  --bs-offcanvas-bg: var(--bs-body-bg);
  --bs-offcanvas-border-width: var(--bs-border-width);
  --bs-offcanvas-border-color: var(--bs-border-color-translucent);
  --bs-offcanvas-box-shadow: var(--bs-box-shadow-sm);
  --bs-offcanvas-transition: transform 0.3s ease-in-out;
  --bs-offcanvas-title-line-height: 1.5
}

.offcanvas {
  position: fixed;
  bottom: 0;
  z-index: var(--bs-offcanvas-zindex);
  display: flex;
  flex-direction: column;
  max-width: 100%;
  color: var(--bs-offcanvas-color);
  visibility: hidden;
  background-color: var(--bs-offcanvas-bg);
  background-clip: padding-box;
  outline: 0;
  transition: var(--bs-offcanvas-transition)
}

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

.offcanvas.offcanvas-end {
  top: 0;
  right: 0;
  width: var(--bs-offcanvas-width);
  border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
  transform: translateX(100%)
}

.offcanvas.show:not(.hiding),
.offcanvas.showing {
  transform: none
}

.offcanvas.hiding,
.offcanvas.show,
.offcanvas.showing {
  visibility: visible
}

.offcanvas-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: #000
}

.offcanvas-backdrop.fade {
  opacity: 0
}

.offcanvas-backdrop.show {
  opacity: .5
}

.offcanvas-header {
  display: flex;
  align-items: center;
  padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x)
}

.offcanvas-header .btn-close {
  padding: calc(var(--bs-offcanvas-padding-y)*0.5) calc(var(--bs-offcanvas-padding-x)*0.5);
  margin: calc(var(--bs-offcanvas-padding-y)*-0.5) calc(var(--bs-offcanvas-padding-x)*-0.5) calc(var(--bs-offcanvas-padding-y)*-0.5) auto
}

.offcanvas-body {
  flex-grow: 1;
  padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
  overflow-y: auto
}

.fixed-top {
  top: 0
}

.fixed-bottom,
.fixed-top {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030
}

.fixed-bottom {
  bottom: 0
}

.sticky-top {
  top: 0
}

.sticky-top {
  position: sticky;
  z-index: 1020
}

.d-flex {
  display: flex !important
}

.d-none {
  display: none !important
}

.shadow-sm {
  box-shadow: var(--bs-box-shadow-sm) !important
}

.flex-wrap {
  flex-wrap: wrap !important
}

.justify-content-center {
  justify-content: center !important
}

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

.align-items-center {
  align-items: center !important
}

.order-1 {
  order: 1 !important
}

.order-2 {
  order: 2 !important
}

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

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

.ms-2 {
  margin-left: .5rem !important
}

.ms-auto {
  margin-left: auto !important
}

.gap-2 {
  gap: .5rem !important
}

.gap-3 {
  gap: 1rem !important
}

.text-center {
  text-align: center !important
}

.bg-white {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important
}

.visible {
  visibility: visible !important
}

@media(min-width:768px) {
  .order-md-1 {
    order: 1 !important
  }

  .order-md-2 {
    order: 2 !important
  }

  .text-md-start {
    text-align: left !important
  }
}

@media(min-width:992px) {
  .d-lg-block {
    display: block !important
  }

  .mb-lg-0 {
    margin-bottom: 0 !important
  }
}

body.rtl-mode {
  direction: rtl;
  font-family: thmanyahsans;
  text-align: right
}

body.rtl-mode .ms-auto {
  margin-right: auto;
  margin-left: 0 !important
}

body.rtl-mode .accordion-button:after {
  margin-right: auto;
  margin-left: 0
}

body.rtl-mode .dropdown-menu {
  right: 0 !important;
  left: auto
}

/*!
 * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2024 Fonticons, Inc.
 */
.fas {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(--fa-display, inline-block);
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto
}

.fas:before {
  content: var(--fa)
}

.fas {
  font-family: Font Awesome\ 6 Free
}

@keyframes fa-beat {

  0%,
  90% {
    transform: scale(1)
  }

  45% {
    transform: scale(var(--fa-beat-scale, 1.25))
  }
}

@keyframes fa-bounce {
  0% {
    transform: scale(1) translateY(0)
  }

  10% {
    transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, .9)) translateY(0)
  }

  30% {
    transform: scale(var(--fa-bounce-jump-scale-x, .9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -.5em))
  }

  50% {
    transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, .95)) translateY(0)
  }

  57% {
    transform: scale(1) translateY(var(--fa-bounce-rebound, -.125em))
  }

  64% {
    transform: scale(1) translateY(0)
  }

  to {
    transform: scale(1) translateY(0)
  }
}

@keyframes fa-fade {
  50% {
    opacity: var(--fa-fade-opacity, .4)
  }
}

@keyframes fa-beat-fade {

  0%,
  to {
    opacity: var(--fa-beat-fade-opacity, .4);
    transform: scale(1)
  }

  50% {
    opacity: 1;
    transform: scale(var(--fa-beat-fade-scale, 1.125))
  }
}

@keyframes fa-flip {
  50% {
    transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg))
  }
}

@keyframes fa-shake {
  0% {
    transform: rotate(-15deg)
  }

  4% {
    transform: rotate(15deg)
  }

  8%,
  24% {
    transform: rotate(-18deg)
  }

  12%,
  28% {
    transform: rotate(18deg)
  }

  16% {
    transform: rotate(-22deg)
  }

  20% {
    transform: rotate(22deg)
  }

  32% {
    transform: rotate(-12deg)
  }

  36% {
    transform: rotate(12deg)
  }

  40%,
  to {
    transform: rotate(0deg)
  }
}

@keyframes fa-spin {
  0% {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(1turn)
  }
}

.fa-comments {
  --fa: ""
}

.fa-share-nodes {
  --fa: ""
}

.fa-users {
  --fa: ""
}

.fa-user {
  --fa: ""
}

.fa-globe {
  --fa: ""
}

.fa-star {
  --fa: ""
}

.fa-shapes {
  --fa: ""
}

.fa-folder-open {
  --fa: ""
}

.fa-circle-play {
  --fa: ""
}

.fa-check-circle {
  --fa: ""
}

.fa-box-open {
  --fa: ""
}

.fa-layer-group {
  --fa: ""
}

.fa-newspaper {
  --fa: ""
}

.fa-language {
  --fa: ""
}

.fa-filter {
  --fa: ""
}

.fa-hand-holding-heart {
  --fa: ""
}

.fa-arrow-right {
  --fa: ""
}

.fa-circle-question {
  --fa: ""
}

.fa-route {
  --fa: ""
}

.fa-tags {
  --fa: ""
}

.fa-headphones {
  --fa: ""
}

.fa-envelope {
  --fa: ""
}

.fa-mosque {
  --fa: ""
}

.fa-download {
  --fa: ""
}

.fa-id-card {
  --fa: ""
}

.fa-sun {
  --fa: ""
}

.fa-location-dot {
  --fa: ""
}

.fa-play {
  --fa: ""
}

.fa-magnifying-glass,
.fa-search {
  --fa: ""
}

.fa-times,
.fa-xmark {
  --fa: ""
}

.fa-chalkboard-user {
  --fa: ""
}

.fa-chevron-left {
  --fa: ""
}

.fa-moon {
  --fa: ""
}

.fa-scale-balanced {
  --fa: ""
}

.fa-book {
  --fa: ""
}

.fa-book-open {
  --fa: ""
}

.fa-brain {
  --fa: ""
}

.fa-graduation-cap {
  --fa: ""
}

/*!
 * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2024 Fonticons, Inc.
 */
:root {
  --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free"
}

@font-face {
  font-family: Font Awesome\ 6 Free;
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(../public/fonts/89672701a5874b80be27649e0494e354.woff2) format("woff2"), url(../public/fonts/fa-regular-400.ttf) format("truetype")
}

/*!
 * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2024 Fonticons, Inc.
 */
:root {
  --fa-style-family-classic: "Font Awesome 6 Free";
  --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free"
}

@font-face {
  font-family: Font Awesome\ 6 Free;
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url(../public/fonts/4a6591ab5460ae5cbff1ecbd6e52193a.woff2) format("woff2"), url(../public/fonts/fa-solid-900.ttf) format("truetype")
}

.fas {
  font-weight: 900
}

/*!
 * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2024 Fonticons, Inc.
 */
:root {
  --fa-style-family-brands: "Font Awesome 6 Brands";
  --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands"
}

@font-face {
  font-family: Font Awesome\ 6 Brands;
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(../public/fonts/cbcf42b2e9228a8f5bad42717d8a88db.woff2) format("woff2"), url(../public/fonts/fa-brands-400.ttf) format("truetype")
}

@font-face {
  font-family: PingAR;
  src: url(../public/fonts/PingAR+LT-Light.otf) format("truetype");
  font-weight: 300
}

@font-face {
  font-family: PingAR;
  src: url(../public/fonts/PingAR+LT-Regular.otf) format("truetype");
  font-weight: 400
}

@font-face {
  font-family: PingAR;
  src: url(../public/fonts/PingAR+LT-Medium.otf) format("truetype");
  font-weight: 500
}

@font-face {
  font-family: PingAR;
  src: url(../public/fonts/PingAR+LT-Bold.otf) format("truetype");
  font-weight: 700
}

@font-face {
  font-family: Expo-Arabic;
  src: url(../public/fonts/Expo-Arabic-Light.ttf) format("truetype");
  font-weight: 300
}

@font-face {
  font-family: Expo-Arabic;
  src: url(../public/fonts/Expo-Arabic-Regular.ttf) format("truetype");
  font-weight: 400
}

@font-face {
  font-family: Expo-Arabic;
  src: url(../public/fonts/Expo-Arabic-Medium.ttf) format("truetype");
  font-weight: 500
}

@font-face {
  font-family: Expo-Arabic;
  src: url(../public/fonts/Expo-Arabic-Bold.ttf) format("truetype");
  font-weight: 700
}

@font-face {
  font-family: thmanyahsans;
  src: url(../public/fonts/thmanyahsans-Light.otf) format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: thmanyahsans;
  src: url(../public/fonts/thmanyahsans-Regular.otf) format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: thmanyahsans;
  src: url(../public/fonts/thmanyahsans-Medium.otf) format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: thmanyahsans;
  src: url(../public/fonts/thmanyahsans-Bold.otf) format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: thmanyahsans;
  src: url(../public/fonts/thmanyahsans-Black.otf) format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap
}

* {
  margin: 0;
  padding: 0;
  outline: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

body,
html {
  height: 100%
}

#wrapper,
body,
html {
  width: 100%;
  margin: 0;
  padding: 0
}

#wrapper {
  min-height: 100%;
  position: relative;
  overflow: hidden
}

.home-navbar {
  will-change: transform;
  transition: transform .35s ease, padding .35s ease, box-shadow .35s ease, background .35s ease
}

.home-navbar.headroom--pinned {
  transform: translateY(0)
}

.home-navbar.headroom--unpinned {
  transform: translateY(-100%)
}

.home-navbar.headroom--not-top {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .12);
  background: hsla(0, 0%, 100%, .97) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px)
}

.home-navbar .dropdown-menu {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px) scale(.98);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s
}

.home-navbar .dropdown-menu.show {
  visibility: visible;
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear 0s
}

.site-footer {
  background-color: #0c1222;
  color: #fff;
  font-family: thmanyahsans, sans-serif;
  direction: rtl;
  overflow: hidden
}

.footer-newsletter {
  padding: 80px 0 64px;
  text-align: center
}

.fn-title {
  font-size: 2.6rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 14px
}

@media(max-width:768px) {
  .fn-title {
    font-size: 1.8rem
  }
}

.fn-subtitle {
  font-size: 16px;
  color: hsla(0, 0%, 100%, .62);
  line-height: 1.7;
  margin-bottom: 36px
}

@media(max-width:768px) {
  .fn-subtitle {
    font-size: 14px
  }
}

.fn-form {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 520px;
  margin: 0 auto
}

@media(max-width:576px) {
  .fn-form {
    flex-direction: column;
    gap: 10px;
    height: 122px;
  }

  .fn-form .fn-btn,
  .fn-form .fn-input {
    width: 100%;
    border-radius: 30px
  }
}

.fn-input {
  flex: 1;
  height: 52px;
  padding: 0 20px;
  background: hsla(0, 0%, 100%, .96);
  border: none;
  border-radius: 40px;
  font-size: 14px;
  font-family: thmanyahsans, sans-serif;
  color: #333;
  text-align: right;
  outline: none;
  transition: box-shadow .2s ease
}

.fn-input::placeholder {
  color: #999
}

.fn-input:focus {
  box-shadow: 0 0 0 3px rgba(175, 128, 51, .35)
}

.fn-btn {
  height: 52px;
  padding: 0 28px;
  background: #af8033;
  color: #fff;
  border: none;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 600;
  font-family: thmanyahsans, sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease
}

.fn-btn:hover {
  background: #c8a24d;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(175, 128, 51, .4)
}

.fn-btn:active {
  transform: translateY(0)
}

.footer-divider {
  border: none;
  border-top: 1px solid hsla(0, 0%, 100%, .08);
  margin: 0
}

.footer-main {
  padding: 56px 0 40px;
  background-color: #0c1222
}

.footer-logo {
  width: auto;
  max-width: 180px;
  max-height: 52px;
  object-fit: contain;
  display: block;
  margin-bottom: 18px
}

.footer-desc {
  font-size: 14px;
  color: hsla(0, 0%, 100%, .62);
  line-height: 1.75;
  max-width: 260px;
  margin: 0
}

.footer-heading {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
  letter-spacing: .01em
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 13px
}

.footer-links li a {
  font-size: 14px;
  color: hsla(0, 0%, 100%, .62);
  text-decoration: none;
  transition: color .22s ease, padding-right .22s ease;
  display: inline-block
}

.footer-links li a:hover {
  color: #c8a24d;
  padding-right: 4px
}

.footer-social {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: hsla(0, 0%, 100%, .07);
  border: 1px solid hsla(0, 0%, 100%, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background .25s ease, border-color .25s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1)
}

.footer-social a:hover {
  background: #af8033;
  border-color: #af8033;
  transform: translateY(-4px)
}

.footer-bottom {
  border-top: 1px solid hsla(0, 0%, 100%, .08);
  padding: 20px 0;
  background-color: #0c1222
}

.footer-copyright {
  font-size: 13px;
  color: hsla(0, 0%, 100%, .35)
}

@media(max-width:767px) {
  .footer-copyright {
    display: block;
    text-align: center;
    margin-top: 12px
  }
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: flex-start
}

@media(max-width:767px) {
  .footer-legal {
    justify-content: center
  }
}

.footer-legal a {
  font-size: 13px;
  color: hsla(0, 0%, 100%, .35);
  text-decoration: none;
  transition: color .2s ease
}

.footer-legal a:hover {
  color: #fff
}

.footer-legal a:not(:last-child) {
  position: relative;
  padding-left: 20px
}

.footer-legal a:not(:last-child):after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: hsla(0, 0%, 100%, .18)
}

@media(max-width:768px) {
  .footer-main {
    padding: 48px 0 32px
  }

  .footer-newsletter {
    padding: 56px 0 48px
  }

  .footer-desc {
    max-width: 100%
  }
}

.btn {
  font-family: thmanyahsans, sans-serif;
  font-weight: 500;
  border-radius: 30px;
  padding: 10px 20px;
  font-size: 16px;
  transition: all .3s ease;
  text-decoration: none
}

.btn.btn-primary {
  background-color: #af8033;
  border-color: #af8033;
  color: #fff
}

.btn.btn-primary:hover {
  background-color: rgb(135.5088495575, 99.1150442478, 39.4911504425);
  border-color: rgb(135.5088495575, 99.1150442478, 39.4911504425);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(175, 128, 51, .3)
}

.btn.btn-primary:active {
  transform: translateY(0)
}

.btn.btn-outline-primary {
  border: 2px solid #0a4b3c;
  color: #0a4b3c;
  background-color: transparent
}

.btn.btn-outline-primary:hover {
  background-color: #0a4b3c;
  color: #fff;
  transform: translateY(-2px)
}

.btn.btn-dark {
  background-color: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff
}

.btn.btn-dark:hover {
  background-color: rgb(51.5, 51.5, 51.5);
  border-color: rgb(51.5, 51.5, 51.5)
}

.btn.btn-lg {
  padding: 12px 24px;
  font-size: 16px
}

.btn.btn-icon {
  background: none;
  border: none;
  color: #1a1a1a;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all .3s ease
}

.btn.btn-icon:hover {
  background-color: #fdfbf4;
  color: #af8033
}

.account-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 113px
}

.language-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px
}

.language-selector .nav-link {
  padding: 0 !important;
  font-weight: 500;
  color: #1a1a1a
}

.language-selector .nav-link:hover {
  color: #af8033
}

.home-navbar {
  font-family: thmanyahsans, sans-serif
}

.home-navbar .navbar-brand {
  margin-left: auto
}

.home-navbar .nav-menu {
  display: flex;
  gap: 32px
}

.home-navbar .nav-menu .nav-item .nav-link {
  font-size: 16px;
  color: #1a1a1a;
  font-weight: 400;
  padding: 0 !important;
  position: relative;
  transition: color .3s ease
}

.home-navbar .nav-menu .nav-item .nav-link:after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background-color: #af8033;
  bottom: -5px;
  right: 0;
  transition: width .3s ease
}

.home-navbar .nav-menu .nav-item .nav-link:hover {
  color: #af8033
}

.home-navbar .nav-menu .nav-item .nav-link:hover:after {
  width: 100%
}

.home-navbar .nav-menu .nav-item .nav-link.active {
  color: #af8033
}

.home-navbar .nav-menu .nav-item .nav-link.active:after {
  width: 100%
}

.home-navbar .navbar-buttons {
  display: flex;
  align-items: center;
  gap: 16px
}

.hero-section {
  min-height: 680px;
  display: flex;
  align-items: center;
  background: url(../public/images/hero.png) 50% no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
  padding: 100px 0
}

@media(max-width:992px) {
  .hero-section {
    padding: 80px 0;
    min-height: 560px
  }
}

@media(max-width:768px) {
  .hero-section {
    min-height: auto;
    padding: 64px 0
  }
}

.hero-section .container-xl {
  position: relative;
  z-index: 2
}

.hero-section .hero-content .hero-title {
  font-size: 56px;
  font-weight: 700;
  color: #0a4b3c;
  line-height: 1.2;
  margin-bottom: 20px;
  font-family: thmanyahsans, sans-serif
}

@media(max-width:768px) {
  .hero-section .hero-content .hero-title {
    font-size: 2.5rem;
    margin-bottom: 16px
  }
}

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

.hero-section .hero-content .hero-subtitle {
  font-size: 20px;
  color: #6b7280;
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 553px;
  font-family: thmanyahsans, sans-serif
}

@media(max-width:768px) {
  .hero-section .hero-content .hero-subtitle {
    font-size: 16px;
    margin-bottom: 24px
  }
}

.hero-section .hero-content .hero-buttons {
  gap: 16px
}

@media(max-width:576px) {
  .hero-section .hero-content .hero-buttons .btn {
    width: 100%
  }
}

.stats-section {
  padding-top: 96px;
  padding-bottom: 96px;
  background-color: #0a4b3c;
  font-family: thmanyahsans, sans-serif
}

@media(max-width:992px) {
  .stats-section {
    padding-top: 72px;
    padding-bottom: 72px
  }
}

@media(max-width:768px) {
  .stats-section {
    padding-top: 56px;
    padding-bottom: 56px
  }
}

@media(max-width:576px) {
  .stats-section {
    padding-top: 48px;
    padding-bottom: 48px
  }
}

.stats-section .stats-grid {
  row-gap: 32px
}

.stats-section .stat-card {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 32px 24px;
  background: hsla(0, 0%, 100%, .07);
  border-radius: 16px;
  border: 1px solid hsla(0, 0%, 100%, .1);
  height: 100%;
  transition: all .3s ease
}

.stats-section .stat-card:hover {
  background: hsla(0, 0%, 100%, .13);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .2)
}

.stats-section .stat-card .stat-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  background: rgba(175, 128, 51, .18);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center
}

.stats-section .stat-card .stat-icon i {
  font-size: 22px;
  color: #c8a24d
}

.stats-section .stat-card .stat-content {
  display: flex;
  flex-direction: column;
  gap: 4px
}

.stats-section .stat-card .stat-content .stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.1;
  direction: ltr;
  text-align: right
}

.stats-section .stat-card .stat-content .stat-label {
  font-size: 14px;
  color: hsla(0, 0%, 100%, .65);
  margin: 0;
  line-height: 1.4
}

@media(max-width:768px) {
  .stats-section .stat-card {
    padding: 24px
  }

  .stats-section .stat-card .stat-icon {
    width: 48px;
    height: 48px;
    min-width: 48px
  }

  .stats-section .stat-card .stat-icon i {
    font-size: 18px
  }

  .stats-section .stat-card .stat-content .stat-number {
    font-size: 1.6rem
  }
}

.about-section {
  padding-top: 96px;
  padding-bottom: 96px;
  background-color: #fdfbf4;
  font-family: thmanyahsans, sans-serif
}

@media(max-width:992px) {
  .about-section {
    padding-top: 72px;
    padding-bottom: 72px
  }
}

@media(max-width:768px) {
  .about-section {
    padding-top: 56px;
    padding-bottom: 56px
  }
}

@media(max-width:576px) {
  .about-section {
    padding-top: 48px;
    padding-bottom: 48px
  }
}

.about-section .about-section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px
}

.about-section .about-section-label .about-label-text {
  font-size: 16px;
  font-weight: 400;
  color: #af8033;
  white-space: nowrap;
  order: 1
}

.about-section .about-section-label .about-label-line {
  width: 36px;
  height: 1.5px;
  background-color: #af8033;
  order: 2
}

.about-section .about-title {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.25;
  color: #1a1a1a;
  margin-bottom: 20px
}

.about-section .about-title .about-title-red {
  color: #9e2a2b
}

.about-section .about-title .about-title-green {
  color: #1b5e3f
}

@media(max-width:768px) {
  .about-section .about-title {
    font-size: 1.9rem
  }
}

.about-section .about-desc {
  font-size: 20px;
  color: #6b7280;
  line-height: 1.75;
  margin-bottom: 36px
}

@media(max-width:768px) {
  .about-section .about-desc {
    font-size: 16px;
    margin-bottom: 32px
  }
}

.about-section .about-features {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: flex;
  flex-direction: column;
  gap: 20px
}

.about-section .about-features .about-feature {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 16px;
  line-height: 1.5
}

.about-section .about-features .about-feature i {
  font-size: 20px;
  min-width: 20px;
  flex-shrink: 0
}

.about-section .about-features .about-feature--active {
  color: #1a1a1a
}

.about-section .about-features .about-feature--active i {
  color: #af8033
}

.about-section .about-features .about-feature--muted {
  color: rgba(26, 26, 26, .38)
}

.about-section .about-features .about-feature--muted i {
  color: rgba(26, 26, 26, .25)
}

.about-section .about-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #af8033;
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 500;
  font-family: thmanyahsans, sans-serif;
  cursor: pointer;
  transition: background-color .25s ease, transform .25s ease
}

.about-section .about-cta-btn:hover {
  background-color: rgb(143.407079646, 104.8920353982, 41.792920354);
  transform: translateY(-2px)
}

.about-section .about-images {
  position: relative;
  width: 100%;
  height: 500px
}

.about-section .about-images .about-img-card {
  position: absolute;
  border-radius: 22px;
  overflow: hidden
}

.about-section .about-images .about-img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.about-section .about-images .about-img-card--main {
  width: 78%;
  height: 360px;
  top: 0;
  right: 0;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .13)
}

.about-section .about-images .about-img-card--accent {
  width: 54%;
  height: 230px;
  bottom: 0;
  left: 0;
  background-color: #78d3d3;
  padding: 16px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .14)
}

.about-section .about-images .about-img-card--accent img {
  border-radius: 14px;
  object-fit: cover
}

.quickstart-section {
  padding: 96px 0;
  background-color: #fff;
  font-family: thmanyahsans, sans-serif;
  overflow: hidden
}

@media(max-width:992px) {
  .quickstart-section {
    padding: 72px 0
  }
}

@media(max-width:768px) {
  .quickstart-section {
    padding: 56px 0
  }
}

.quickstart-section .qs-header {
  margin-bottom: 32px
}

.quickstart-section .qs-header .qs-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px
}

.quickstart-section .qs-header .qs-label .qs-label-text {
  font-size: 16px;
  color: #af8033;
  font-weight: 400;
  white-space: nowrap;
  order: 1
}

.quickstart-section .qs-header .qs-label .qs-label-line {
  width: 32px;
  height: 1.5px;
  background: #af8033;
  order: 2
}

.quickstart-section .qs-header .qs-title {
  font-size: 2.4rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.25
}

@media(max-width:768px) {
  .quickstart-section .qs-header .qs-title {
    font-size: 1.8rem
  }
}

.quickstart-section .qs-card {
  border-radius: 22px;
  height: 430px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  will-change: transform, box-shadow;
  transition: transform .42s cubic-bezier(.34, 1.56, .64, 1), box-shadow .42s ease
}

.quickstart-section .qs-card:hover {
  transform: translateY(-12px) scale(1.015)
}

.quickstart-section .qs-card:hover .qs-card-link .qs-arrow {
  transform: rotate(-45deg) translate(-3px, -3px)
}

.quickstart-section .qs-card:hover .qs-card-visual img {
  transform: scale(1.09)
}

@media(max-width:768px) {
  .quickstart-section .qs-card {
    height: 360px
  }
}

.quickstart-section .qs-card--photo:hover {
  box-shadow: 0 32px 64px rgba(0, 0, 0, .28)
}

.quickstart-section .qs-card--photo:hover .qs-photo-bg {
  transform: scale(1.08)
}

.quickstart-section .qs-card--photo:hover .qs-photo-overlay {
  opacity: .75
}

.quickstart-section .qs-card--photo .qs-photo-bg {
  position: absolute;
  inset: -2px;
  background-size: cover;
  background-position: 50%;
  transform: scale(1);
  transition: transform .55s cubic-bezier(.25, .46, .45, .94);
  z-index: 0
}

.quickstart-section .qs-card--photo .qs-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(175deg, rgba(0, 0, 0, .04), rgba(4, 18, 12, .55) 50%, rgba(4, 18, 12, .88));
  z-index: 1;
  opacity: 1;
  transition: opacity .4s ease
}

.quickstart-section .qs-card--navy {
  background-color: #1e2b4a;
  display: flex;
  flex-direction: column
}

.quickstart-section .qs-card--navy:hover {
  box-shadow: 0 32px 64px rgba(30, 43, 74, .5)
}

.quickstart-section .qs-card--teal {
  background-color: #78d3d3;
  display: flex;
  flex-direction: column
}

.quickstart-section .qs-card--teal:hover {
  box-shadow: 0 32px 64px rgba(100, 200, 200, .48)
}

.quickstart-section .qs-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.quickstart-section .qs-card-body--bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2
}

.quickstart-section .qs-card-body--top {
  flex-shrink: 0;
  position: relative;
  z-index: 2
}

.quickstart-section .qs-card-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3
}

.quickstart-section .qs-card-desc {
  font-size: 13.5px;
  margin: 0;
  line-height: 1.65
}

.quickstart-section .qs-card--photo .qs-card-title {
  color: #fff
}

.quickstart-section .qs-card--photo .qs-card-desc {
  color: hsla(0, 0%, 100%, .76)
}

.quickstart-section .qs-card--navy .qs-card-title {
  color: #fff
}

.quickstart-section .qs-card--navy .qs-card-desc {
  color: hsla(0, 0%, 100%, .62)
}

.quickstart-section .qs-card--teal .qs-card-title {
  color: #0c3232
}

.quickstart-section .qs-card--teal .qs-card-desc {
  color: rgba(12, 50, 50, .72)
}

.quickstart-section .qs-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  margin-top: 4px;
  color: #c8a24d;
  transition: gap .3s ease, color .3s ease
}

.quickstart-section .qs-card-link--dark {
  color: #0c3232
}

.quickstart-section .qs-card-link:hover {
  gap: 14px
}

.quickstart-section .qs-card-link .qs-arrow {
  display: inline-block;
  transform: rotate(-45deg);
  font-size: 11px;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1)
}

.quickstart-section .qs-card-visual {
  flex: 1;
  overflow: hidden;
  position: relative
}

.quickstart-section .qs-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transform: scale(1);
  transition: transform .55s cubic-bezier(.25, .46, .45, .94)
}

.library-section {
  padding-top: 96px;
  padding-bottom: 96px;
  background-color: #0b1628;
  font-family: thmanyahsans, sans-serif
}

@media(max-width:992px) {
  .library-section {
    padding-top: 72px;
    padding-bottom: 72px
  }
}

@media(max-width:768px) {
  .library-section {
    padding-top: 56px;
    padding-bottom: 56px
  }
}

@media(max-width:576px) {
  .library-section {
    padding-top: 48px;
    padding-bottom: 48px
  }
}

.library-section .lib-header {
  margin-bottom: 48px
}

.library-section .lib-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px
}

.library-section .lib-label .lib-label-text {
  font-size: 16px;
  color: #c8a24d;
  font-weight: 400;
  white-space: nowrap;
  order: 1
}

.library-section .lib-label .lib-label-line {
  width: 32px;
  height: 1.5px;
  background: #c8a24d;
  order: 2
}

.library-section .lib-title {
  font-size: 2.6rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin: 0
}

@media(max-width:768px) {
  .library-section .lib-title {
    font-size: 1.9rem
  }
}

.library-section .lib-cards-row {
  row-gap: 24px
}

.library-section .lib-card {
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  min-height: 260px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .38s cubic-bezier(.34, 1.56, .64, 1), box-shadow .38s ease
}

.library-section .lib-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .22)
}

.library-section .lib-card--featured {
  background: linear-gradient(135deg, #c8a24d, #af8033)
}

.library-section .lib-card--featured .lib-card-num {
  color: hsla(0, 0%, 100%, .35)
}

.library-section .lib-card--featured .lib-card-body .lib-card-title {
  color: #fff
}

.library-section .lib-card--featured .lib-card-body .lib-card-desc {
  color: hsla(0, 0%, 100%, .78)
}

.library-section .lib-card--featured .lib-card-footer .lib-card-count {
  color: hsla(0, 0%, 100%, .72)
}

.library-section .lib-card--featured .lib-tag {
  border-color: hsla(0, 0%, 100%, .55);
  color: #fff
}

.library-section .lib-card--featured .lib-tag:hover {
  background: hsla(0, 0%, 100%, .18)
}

.library-section .lib-card--featured:hover {
  box-shadow: 0 20px 48px rgba(175, 128, 51, .45)
}

.library-section .lib-card-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background: hsla(0, 0%, 100%, .22);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid hsla(0, 0%, 100%, .4);
  letter-spacing: .02em
}

.library-section .lib-card-num {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 3rem;
  font-weight: 700;
  color: rgba(175, 128, 51, .18);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  direction: ltr
}

.library-section .lib-card-body {
  flex: 1;
  padding-top: 52px;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.library-section .lib-card-body .lib-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.35;
  margin: 0
}

.library-section .lib-card-body .lib-card-desc {
  font-size: 13.5px;
  color: #6b7280;
  line-height: 1.65;
  margin: 0
}

.library-section .lib-card-footer {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.library-section .lib-card-footer .lib-card-count {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500
}

.library-section .lib-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.library-section .lib-tag {
  display: inline-block;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid #af8033;
  color: #af8033;
  background: transparent;
  white-space: nowrap;
  transition: background .2s ease
}

.library-section .lib-tag:hover {
  background: rgba(175, 128, 51, .08)
}

@media(max-width:768px) {
  .library-section .lib-card {
    min-height: 220px;
    padding: 22px
  }

  .library-section .lib-title {
    font-size: 1.7rem
  }
}

body.dark-mode {
  color: #e5e7eb
}

body.dark-mode,
body.dark-mode .hero-section,
body.dark-mode .library-section,
body.dark-mode .quickstart-section {
  background-color: #1a1a1a
}

body.dark-mode .about-section {
  background-color: #262626
}

body.dark-mode .home-navbar {
  background-color: #1a1a1a !important;
  border-bottom: 1px solid #333
}

body.dark-mode .home-navbar .nav-link {
  color: #e5e7eb !important
}

body.dark-mode .home-navbar .nav-link.active,
body.dark-mode .home-navbar .nav-link:hover {
  color: #af8033 !important
}

body.dark-mode .home-navbar .btn-icon {
  color: #e5e7eb
}

body.dark-mode .home-navbar .btn-icon:hover {
  background-color: #333
}

body.dark-mode .btn.btn-icon {
  background-color: transparent;
  color: #e5e7eb
}

body.dark-mode .btn.btn-icon:hover {
  background-color: #333
}

@media(max-width:992px) {
  .hero-section {
    min-height: auto;
    padding: 40px 0
  }

  .hero-section .hero-content {
    text-align: right
  }

  .hero-section .hero-content .hero-buttons {
    flex-wrap: wrap
  }

  .about-section .about-content {
    text-align: right
  }

  .about-section .about-images {
    margin-top: 40px
  }

  .library-section .row .col-lg-3,
  .quickstart-section .row .col-lg-3 {
    flex: 0 0 calc(50% - 8px)
  }
}

@media(max-width:768px) {

  .library-section .row .col-md-6,
  .quickstart-section .row .col-md-6 {
    flex: 0 0 100%
  }

  .home-navbar .nav-link {
    font-size: 14px
  }
}

@media print {

  .hero-section,
  .home-navbar,
  .quickstart-section {
    display: none
  }

  .about-section,
  .library-section {
    page-break-inside: avoid
  }
}

.about-page {
  background: #f5f2e9;
  color: #17211e;
  font-family: thmanyahsans, sans-serif
}

.about-page #wrapper {
  overflow: visible
}

.about-page-shell {
  min-height: 100vh;
  background: linear-gradient(90deg, rgba(10, 75, 60, .04) 1px, transparent 0), linear-gradient(180deg, rgba(10, 75, 60, .04) 1px, transparent 0), linear-gradient(180deg, #fbfaf4, #f5f2e9 54%, #fff);
  background-size: 56px 56px, 56px 56px, auto
}

.about-intro-band {
  padding: 74px 0 36px;
  border-bottom: 1px solid rgba(10, 75, 60, .12)
}

.about-intro-layout {
  max-width: 1040px;
  margin-right: auto
}

@media(max-width:1100px) {
  .about-intro-layout {
    margin-right: 0
  }
}

.about-intro-copy .h1,
.about-intro-copy h1 {
  max-width: 960px;
  margin: 0;
  color: #0a4b3c;
  font-size: clamp(42px, 6vw, 84px);
  font-weight: 900;
  line-height: 1.08
}

.about-intro-copy p {
  max-width: 900px;
  margin: 24px 0 0;
  color: #52605b;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.95
}

.about-snapshot {
  padding: 0 0 62px
}

.about-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-right: 1px solid rgba(10, 75, 60, .12);
  border-bottom: 1px solid rgba(10, 75, 60, .12);
  background: hsla(0, 0%, 100%, .72)
}

@media(max-width:1000px) {
  .about-snapshot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:620px) {
  .about-snapshot-grid {
    grid-template-columns: 1fr
  }
}

.about-snapshot-grid article {
  min-height: 190px;
  padding: 24px;
  border-top: 1px solid rgba(10, 75, 60, .12);
  border-left: 1px solid rgba(10, 75, 60, .12);
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.about-snapshot-grid span {
  color: #af8033;
  font-size: 12px;
  font-weight: 900
}

.about-snapshot-grid strong {
  color: #0a4b3c;
  font-size: 26px;
  font-weight: 900
}

.about-snapshot-grid p {
  margin: 0;
  color: #62706b;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8
}

.about-manifest {
  padding: 76px 0;
  background: #0a4b3c;
  color: #fff
}

.about-manifest-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 54px
}

@media(max-width:900px) {
  .about-manifest-layout {
    grid-template-columns: 1fr;
    gap: 28px
  }
}

.about-manifest-index {
  position: sticky;
  top: 110px;
  align-self: start;
  padding-top: 18px;
  border-top: 3px solid #d9b66d
}

@media(max-width:900px) {
  .about-manifest-index {
    position: static
  }
}

.about-manifest-index span,
.about-manifest-index strong {
  display: block
}

.about-manifest-index span {
  color: #d9b66d;
  font-size: 13px;
  font-weight: 900
}

.about-manifest-index strong {
  margin-top: 12px;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.4
}

.about-manifest-stack {
  display: grid;
  gap: 0
}

.about-manifest-stack article {
  padding: 34px 0;
  border-bottom: 1px solid hsla(0, 0%, 100%, .16)
}

.about-manifest-stack article:first-child {
  padding-top: 0
}

.about-manifest-stack span {
  color: #d9b66d;
  font-size: 14px;
  font-weight: 900
}

.about-manifest-stack .h2,
.about-manifest-stack h2 {
  max-width: 980px;
  margin: 12px 0 16px;
  color: #fff;
  font-size: clamp(30px, 4.4vw, 58px);
  font-weight: 900;
  line-height: 1.22
}

.about-manifest-stack p {
  max-width: 880px;
  margin: 0;
  color: hsla(0, 0%, 100%, .72);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.9
}

.about-audience,
.about-operating-model {
  padding: 76px 0
}

.about-section-title {
  max-width: 850px;
  margin-bottom: 28px
}

.about-section-title span {
  color: #af8033;
  font-size: 14px;
  font-weight: 900
}

.about-section-title .h2,
.about-section-title h2 {
  margin: 10px 0 0;
  color: #17211e;
  font-size: clamp(32px, 4.8vw, 60px);
  font-weight: 900;
  line-height: 1.2
}

.about-section-title p {
  max-width: 680px;
  margin: 14px 0 0;
  color: #5c6964;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.9
}

.about-model-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(10, 75, 60, .13);
  border-right: 1px solid rgba(10, 75, 60, .13)
}

@media(max-width:1100px) {
  .about-model-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:620px) {
  .about-model-grid {
    grid-template-columns: 1fr
  }
}

.about-model-grid article {
  min-height: 270px;
  padding: 28px;
  border-left: 1px solid rgba(10, 75, 60, .13);
  border-bottom: 1px solid rgba(10, 75, 60, .13);
  background: hsla(0, 0%, 100%, .78)
}

.about-model-grid i {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #f1e7d4;
  color: #0a4b3c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 21px
}

.about-model-grid .h3,
.about-model-grid h3 {
  margin: 48px 0 12px;
  color: #0a4b3c;
  font-size: 27px;
  font-weight: 900
}

.about-model-grid p {
  margin: 0;
  color: #5f6c67;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8
}

.about-audience {
  background: linear-gradient(90deg, rgba(175, 128, 51, .12), transparent 42%), #fbfaf4;
  border-top: 1px solid rgba(10, 75, 60, .1);
  border-bottom: 1px solid rgba(10, 75, 60, .1)
}

.about-audience-layout {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 42px;
  align-items: start
}

@media(max-width:992px) {
  .about-audience-layout {
    grid-template-columns: 1fr
  }
}

.about-audience-table {
  display: grid;
  border-top: 1px solid rgba(10, 75, 60, .14)
}

.about-audience-table div {
  padding: 24px 0;
  border-bottom: 1px solid rgba(10, 75, 60, .14);
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 18px;
  align-items: baseline
}

@media(max-width:620px) {
  .about-audience-table div {
    grid-template-columns: 1fr
  }
}

.about-audience-table span {
  color: #af8033;
  font-size: 14px;
  font-weight: 900
}

.about-audience-table strong {
  color: #0a4b3c;
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 900;
  line-height: 1.35
}

.centers-section {
  padding-top: 96px;
  padding-bottom: 96px;
  background-color: #fdfbf4;
  font-family: thmanyahsans, sans-serif
}

@media(max-width:992px) {
  .centers-section {
    padding-top: 72px;
    padding-bottom: 72px
  }
}

@media(max-width:768px) {
  .centers-section {
    padding-top: 56px;
    padding-bottom: 56px
  }
}

.centers-section .centers-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px
}

.centers-section .centers-title {
  font-size: 2.4rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.2;
  margin: 0
}

@media(max-width:768px) {
  .centers-section .centers-title {
    font-size: 1.75rem
  }
}

.centers-section .centers-map-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #af8033;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: gap .25s ease, opacity .25s ease
}

.centers-section .centers-map-link i {
  font-size: 11px;
  transition: transform .25s ease
}

.centers-section .centers-map-link:hover {
  opacity: .8;
  gap: 10px
}

.centers-section .centers-map-link:hover i {
  transform: translateX(-3px)
}

.centers-section .center-card {
  display: block;
  position: relative;
  height: 290px;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  will-change: transform, box-shadow;
  transition: transform .38s cubic-bezier(.34, 1.56, .64, 1), box-shadow .38s ease
}

.centers-section .center-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 52px rgba(0, 0, 0, .28)
}

.centers-section .center-card:hover .center-card-bg {
  transform: scale(1.07)
}

.centers-section .center-card:hover .center-card-overlay {
  opacity: .88
}

@media(max-width:768px) {
  .centers-section .center-card {
    height: 240px
  }
}

.centers-section .center-card-bg {
  position: absolute;
  inset: -2px;
  background-size: cover;
  background-position: 50%;
  transform: scale(1);
  transition: transform .55s cubic-bezier(.25, .46, .45, .94);
  z-index: 0
}

.centers-section .center-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .15) 40%, rgba(5, 10, 20, .78));
  z-index: 1;
  opacity: 1;
  transition: opacity .35s ease
}

.centers-section .center-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  background: rgba(10, 12, 18, .72);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 20px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid hsla(0, 0%, 100%, .12);
  letter-spacing: .01em;
  white-space: nowrap
}

.centers-section .center-card-body {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 2;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px
}

.centers-section .center-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.35
}

.centers-section .center-card-address {
  font-size: 12.5px;
  color: hsla(0, 0%, 100%, .6);
  margin: 0;
  line-height: 1.4
}

.centers-map-page {
  background: #f6f2e8
}

.centers-map-page #wrapper {
  overflow: visible
}

.centers-map-shell {
  min-height: 100vh;
  background: linear-gradient(180deg, #fbf7ef, #f6f2e8 42%, #fff);
  color: #17211e;
  font-family: thmanyahsans, sans-serif
}

.centers-map-hero {
  position: relative;
  padding: 120px 0 64px;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, rgba(251, 247, 239, .96), rgba(251, 247, 239, .74) 42%, rgba(251, 247, 239, .22)), url(../public/images/centers-hero.png) 50%/cover no-repeat;
  border-bottom: 1px solid rgba(10, 75, 60, .1)
}

@media(max-width:768px) {
  .centers-map-hero {
    min-height: 520px;
    padding: 72px 0 52px;
    background: linear-gradient(180deg, rgba(251, 247, 239, .96), rgba(251, 247, 239, .72)), url(../public/images/centers-hero.png) 50%/cover no-repeat
  }
}

.centers-map-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px
}

@media(max-width:768px) {
  .centers-map-heading {
    align-items: stretch;
    flex-direction: column
  }
}

.centers-map-heading .h1,
.centers-map-heading h1 {
  max-width: 760px;
  margin: 10px 0 14px;
  color: #0a4b3c;
  font-size: clamp(2.4rem, 5.2vw, 5.2rem);
  font-weight: 800;
  line-height: 1.12
}

.centers-map-heading p {
  max-width: 690px;
  margin: 0;
  color: #55625d;
  font-size: 17px;
  line-height: 1.8
}

.centers-map-kicker {
  display: inline-flex;
  color: #af8033;
  font-size: 14px;
  font-weight: 700
}

.centers-explorer {
  padding: 36px 0 88px
}

.centers-toolbar {
  display: grid;
  grid-template-columns: minmax(300px, .95fr) minmax(0, 1.35fr);
  gap: 20px;
  align-items: end;
  margin-bottom: 28px;
  padding: 20px;
  border: 1px solid rgba(10, 75, 60, .1);
  border-radius: 8px;
  background: hsla(0, 0%, 100%, .92);
  box-shadow: 0 18px 36px rgba(10, 75, 60, .08)
}

@media(max-width:992px) {
  .centers-toolbar {
    grid-template-columns: 1fr;
    padding: 16px
  }
}

.centers-search {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.centers-search span {
  color: #2f3a36;
  font-size: 13px;
  font-weight: 700
}

.centers-search input {
  width: 100%;
  min-height: 54px;
  padding: 0 18px;
  border: 1px solid rgba(10, 75, 60, .2);
  border-radius: 8px;
  background: #fff;
  color: #17211e;
  font-size: 15px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease
}

.centers-search input:focus {
  border-color: #0a4b3c;
  box-shadow: 0 0 0 4px rgba(10, 75, 60, .12)
}

.centers-filter-group {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px
}

@media(max-width:992px) {
  .centers-filter-group {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:520px) {
  .centers-filter-group {
    grid-template-columns: 1fr
  }
}

.centers-filter {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(10, 75, 60, .18);
  border-radius: 999px;
  background: hsla(0, 0%, 100%, .72);
  color: #33413c;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: normal;
  transition: background .2s ease, color .2s ease, border-color .2s ease
}

.centers-filter.is-active,
.centers-filter:hover {
  border-color: #0a4b3c;
  background: #0a4b3c;
  color: #fff
}

.centers-layout {
  display: block
}

.centers-list-panel {
  border: 1px solid rgba(10, 75, 60, .12);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 20px 44px rgba(10, 75, 60, .09)
}

.centers-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px
}

.centers-list-header .h2,
.centers-list-header h2 {
  margin: 0;
  color: #17211e;
  font-size: 20px;
  font-weight: 800
}

.centers-list-header p,
.centers-list-header span {
  margin: 4px 0 0;
  color: #66736e;
  font-size: 13px
}

.centers-list-panel {
  padding: 22px
}

.centers-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-height: none;
  overflow: visible;
  padding: 0
}

@media(max-width:1100px) {
  .centers-list {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:680px) {
  .centers-list {
    grid-template-columns: 1fr
  }
}

.center-list-card {
  width: 100%;
  min-height: 210px;
  padding: 18px;
  border: 1px solid rgba(10, 75, 60, .12);
  border-radius: 8px;
  background: #fbfaf6;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  text-align: right;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease, transform .18s ease
}

.center-list-card.is-active,
.center-list-card:focus,
.center-list-card:hover {
  border-color: #af8033;
  background: #fff;
  transform: translateY(-2px);
  color: inherit;
  text-decoration: none;
  outline: none
}

.center-list-card:focus-visible {
  box-shadow: 0 0 0 4px rgba(175, 128, 51, .18)
}

.center-list-card .h3,
.center-list-card h3 {
  margin: 0 0 8px;
  color: #17211e;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.45
}

.center-list-card p {
  margin: 0;
  color: #66736e;
  font-size: 13px;
  line-height: 1.65
}

.center-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px
}

.center-card-chip {
  display: inline-flex;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(10, 75, 60, .08);
  color: #0a4b3c;
  font-size: 11px;
  font-weight: 700
}

.centers-empty {
  margin: 18px 0 0;
  padding: 16px;
  border-radius: 8px;
  background: rgba(175, 128, 51, .1);
  color: #7a5a22;
  font-size: 14px;
  text-align: center
}

.center-details-modal:not(.show) {
  display: none
}

.center-details-modal .modal-dialog {
  max-width: 920px;
  margin-right: auto;
  margin-left: auto
}

.center-details-modal .modal-content {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: #fffdf8;
  box-shadow: 0 24px 70px rgba(10, 75, 60, .22)
}

.center-modal-close {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: hsla(0, 0%, 100%, .92);
  color: #0a4b3c;
  box-shadow: 0 10px 24px rgba(10, 75, 60, .16);
  cursor: pointer
}

.center-modal-grid {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr)
}

@media(max-width:768px) {
  .center-modal-grid {
    grid-template-columns: 1fr
  }
}

.center-modal-media {
  min-height: 460px;
  background: #eef3ef
}

.center-modal-media img {
  width: 100%;
  height: 100%;
  min-height: 460px;
  object-fit: cover;
  display: block
}

@media(max-width:768px) {

  .center-modal-media,
  .center-modal-media img {
    min-height: 260px
  }
}

.center-modal-content {
  padding: clamp(24px, 4vw, 44px)
}

.center-modal-content .h2,
.center-modal-content h2 {
  margin: 8px 0 14px;
  color: #0a4b3c;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.25
}

.center-modal-kicker {
  display: inline-flex;
  color: #af8033;
  font-size: 13px;
  font-weight: 800
}

.center-modal-description {
  margin: 0 0 22px;
  color: #55625d;
  font-size: 15px;
  line-height: 1.9
}

.center-modal-info {
  display: grid;
  gap: 10px;
  margin-bottom: 18px
}

.center-modal-info div {
  padding: 14px;
  border: 1px solid rgba(10, 75, 60, .1);
  border-radius: 8px;
  background: #fbfaf6
}

.center-modal-info span {
  display: block;
  margin-bottom: 5px;
  color: #7d8a85;
  font-size: 12px;
  font-weight: 700
}

.center-modal-info strong {
  color: #17211e;
  font-size: 14px;
  line-height: 1.7
}

.center-modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px
}

.center-share-btn {
  min-height: 48px;
  width: 100%;
  border: 0;
  border-radius: 30px;
  background: #0a4b3c;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease
}

.center-share-btn:focus,
.center-share-btn:hover {
  background: #08392f;
  transform: translateY(-1px);
  outline: none
}

.library-page {
  background: #f6f2e8
}

.library-page #wrapper {
  overflow: visible
}

.library-page-shell {
  min-height: 100vh;
  background: linear-gradient(180deg, #fbf7ef, #f6f2e8 48%, #fff);
  color: #17211e;
  font-family: thmanyahsans, sans-serif
}

.library-hero {
  padding: 88px 0 58px;
  border-bottom: 1px solid rgba(10, 75, 60, .1);
  background: radial-gradient(circle at 18% 22%, rgba(175, 128, 51, .18), transparent 26%), radial-gradient(circle at 78% 12%, rgba(10, 75, 60, .12), transparent 24%), linear-gradient(135deg, hsla(0, 0%, 100%, .86), hsla(0, 0%, 100%, .42))
}

@media(max-width:768px) {
  .library-hero {
    padding: 58px 0 42px
  }
}

.library-hero-grid {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px
}

@media(max-width:768px) {
  .library-hero-grid {
    align-items: stretch;
    flex-direction: column
  }
}

.library-hero-grid .h1,
.library-hero-grid h1 {
  max-width: 760px;
  margin: 10px 0 14px;
  color: #0a4b3c;
  font-size: clamp(2.3rem, 5vw, 5rem);
  font-weight: 800;
  line-height: 1.12
}

.library-hero-grid p {
  max-width: 720px;
  margin: 0;
  color: #55625d;
  font-size: 17px;
  line-height: 1.85
}

.library-kicker {
  display: inline-flex;
  color: #af8033;
  font-size: 14px;
  font-weight: 800
}

.library-summary {
  min-width: 156px;
  padding: 18px 20px;
  border: 1px solid rgba(10, 75, 60, .14);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(10, 75, 60, .08)
}

.library-summary strong {
  display: block;
  color: #0a4b3c;
  font-size: 34px;
  line-height: 1
}

.library-summary span {
  color: #65716c;
  font-size: 13px
}

.library-explorer {
  padding: 34px 0 88px
}

.library-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1.4fr) repeat(4, minmax(170px, 1fr));
  gap: 16px;
  align-items: end;
  margin-bottom: 16px;
  padding: 20px;
  border: 1px solid rgba(10, 75, 60, .1);
  border-radius: 8px;
  background: hsla(0, 0%, 100%, .94);
  box-shadow: 0 18px 36px rgba(10, 75, 60, .08)
}

@media(max-width:768px) {
  .library-toolbar {
    grid-template-columns: 1fr;
    padding: 16px
  }
}

@media(min-width:769px)and (max-width:1180px) {
  .library-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .library-toolbar .library-search {
    grid-column: 1/-1
  }
}

.library-search,
.library-select {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.library-search span,
.library-select span {
  color: #2f3a36;
  font-size: 13px;
  font-weight: 800
}

.library-search input,
.library-select input {
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid rgba(10, 75, 60, .2);
  border-radius: 8px;
  background: #fff;
  color: #17211e;
  font-size: 15px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease
}

.library-search input:focus,
.library-select input:focus {
  border-color: #0a4b3c;
  box-shadow: 0 0 0 4px rgba(10, 75, 60, .12)
}

.library-select {
  min-width: 0
}

.library-select .filter-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 0 44px 0 14px;
  border: 1px solid rgba(10, 75, 60, .2);
  border-radius: 8px;
  background: #fff;
  color: #17211e;
  box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease
}

.library-select .filter-select-wrap>i {
  position: absolute;
  right: 16px;
  color: #0a4b3c;
  font-size: 15px
}

.library-select .filter-select-wrap.is-open {
  border-color: #0a4b3c;
  box-shadow: 0 0 0 4px rgba(10, 75, 60, .12)
}

.library-select .filter-select-native {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0
}

.library-select .filter-select-trigger {
  width: 100%;
  min-height: 52px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #17211e;
  font-size: 14px;
  font-weight: 800;
  text-align: right;
  cursor: pointer
}

.library-select .filter-select-trigger:after {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b756f;
  font-family: Font Awesome\ 6 Free;
  font-size: 12px;
  font-weight: 900
}

.library-select .filter-select-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  z-index: 30;
  overflow: hidden;
  border: 1px solid rgba(10, 75, 60, .14);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(10, 75, 60, .16)
}

.library-select .filter-select-menu[aria-hidden=true] {
  display: none
}

.library-select .filter-select-search-wrap {
  position: relative;
  padding: 10px;
  border-bottom: 1px solid rgba(10, 75, 60, .08)
}

.library-select .filter-select-search-wrap i {
  position: absolute;
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
  color: #89918d;
  font-size: 12px
}

.library-select .filter-select-search {
  width: 100%;
  min-height: 40px;
  padding: 0 36px 0 12px;
  border: 1px solid rgba(10, 75, 60, .14);
  border-radius: 8px;
  color: #17211e;
  font-size: 13px
}

.library-select .filter-select-options {
  max-height: 230px;
  overflow-y: auto;
  padding: 6px
}

.library-select .filter-select-option {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #35423d;
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  cursor: pointer
}

.library-select .filter-select-option.is-active,
.library-select .filter-select-option:hover {
  background: rgba(10, 75, 60, .08);
  color: #0a4b3c
}

.library-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px
}

.library-results-head .h2,
.library-results-head h2 {
  margin: 0;
  color: #17211e;
  font-size: 22px;
  font-weight: 800
}

.library-results-head span {
  color: #66736e;
  font-size: 13px;
  font-weight: 700
}

.library-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px
}

@media(max-width:1100px) {
  .library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:680px) {
  .library-grid {
    grid-template-columns: 1fr
  }
}

.library-material-card {
  min-height: 236px;
  padding: 18px;
  border: 1px solid rgba(10, 75, 60, .12);
  border-radius: 8px;
  background: #fff;
  color: inherit;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  box-shadow: 0 16px 34px rgba(10, 75, 60, .07);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease
}

.library-material-card:hover {
  border-color: #af8033;
  transform: translateY(-2px);
  box-shadow: 0 22px 42px rgba(10, 75, 60, .11)
}

.library-material-card--package {
  border-color: rgba(175, 128, 51, .28);
  background: linear-gradient(180deg, #fff, #fffaf0)
}

.library-material-card--package .library-material-icon {
  background: rgba(175, 128, 51, .16);
  color: #8c6424
}

.library-material-card .h3,
.library-material-card h3 {
  margin: 14px 0 8px;
  color: #0a4b3c;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.45
}

.library-material-card p {
  margin: 0;
  color: #66736e;
  font-size: 13px;
  line-height: 1.75
}

.library-material-count {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(175, 128, 51, .12);
  color: #8c6424;
  font-size: 12px;
  font-weight: 800
}

.library-material-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}

.library-material-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: rgba(10, 75, 60, .08);
  color: #0a4b3c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px
}

.library-material-type {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(175, 128, 51, .12);
  color: #8c6424;
  font-size: 11px;
  font-weight: 800
}

.library-material-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px
}

.library-material-chip {
  display: inline-flex;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(10, 75, 60, .08);
  color: #0a4b3c;
  font-size: 11px;
  font-weight: 800
}

.library-empty {
  margin: 18px 0 0;
  padding: 16px;
  border-radius: 8px;
  background: rgba(175, 128, 51, .1);
  color: #7a5a22;
  font-size: 14px;
  text-align: center
}

.courses-page {
  background: #f6f2e8
}

.courses-shell {
  min-height: 100vh;
  background: radial-gradient(62% 48% at 12% -2%, rgba(175, 128, 51, .16), transparent 60%), radial-gradient(58% 50% at 90% 2%, rgba(10, 75, 60, .13), transparent 58%), radial-gradient(80% 72% at 50% 118%, rgba(10, 75, 60, .08), transparent 62%), linear-gradient(160deg, #fcf9f3 0%, #f5f0e6 55%, #eef3f0 100%);
  background-attachment: fixed;
  color: #17211e;
  font-family: thmanyahsans, sans-serif
}

.courses-hero {
  padding: 88px 0 62px;
  border-bottom: 1px solid rgba(10, 75, 60, .1)
}

.courses-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .72fr);
  gap: 34px;
  align-items: end
}

.courses-kicker,
.courses-panel-label,
.courses-section-head span {
  display: inline-flex;
  color: #af8033;
  font-size: 14px;
  font-weight: 800
}

.courses-hero-copy .h1,
.courses-hero-copy h1 {
  max-width: 720px;
  margin: 12px 0 16px;
  color: #0a4b3c;
  font-size: clamp(2.7rem, 6vw, 5.4rem);
  font-weight: 900;
  line-height: 1.08
}

.courses-hero-copy p {
  max-width: 820px;
  margin: 0;
  color: #4f5c58;
  font-size: 18px;
  line-height: 1.9
}

.courses-progress-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: center;
  padding: 24px;
  border: 1px solid rgba(10, 75, 60, .12);
  border-radius: 8px;
  background: hsla(0, 0%, 100%, .92);
  box-shadow: 0 22px 44px rgba(10, 75, 60, .1)
}

.courses-progress-card .h2,
.courses-progress-card h2 {
  margin: 0 0 8px;
  color: #0a4b3c;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.4
}

.courses-progress-card p {
  margin: 0;
  color: #5d6864;
  font-size: 14px;
  line-height: 1.7
}

.courses-progress-ring {
  width: 104px;
  height: 104px;
  border-color: #af8033 #0a4b3c rgba(175, 128, 51, .18) rgba(175, 128, 51, .18);
  border-style: solid;
  border-width: 10px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center
}

.courses-progress-ring span,
.courses-progress-ring strong {
  display: block
}

.courses-progress-ring strong {
  color: #0a4b3c;
  font-size: 32px;
  line-height: 1
}

.courses-progress-ring span {
  color: #66716c;
  font-size: 12px;
  font-weight: 800
}

.courses-path-section {
  padding: 76px 0
}

.courses-section-head {
  margin-bottom: 26px
}

.courses-section-head .h2,
.courses-section-head h2 {
  margin: 8px 0 0;
  color: #0a4b3c;
  font-size: clamp(2rem, 4vw, 3.7rem);
  font-weight: 900;
  line-height: 1.2
}

.courses-assessments,
.courses-catalog-section,
.courses-dashboard-preview {
  padding: 76px 0
}

.courses-section-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 26px
}

.courses-section-row .courses-section-head {
  margin-bottom: 0
}

.assessment-note,
.courses-section-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(10, 75, 60, .16);
  border-radius: 999px;
  background: #fff;
  color: #0a4b3c;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap
}

.training-course-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(260px, .82fr));
  gap: 18px
}

.assessment-card,
.courses-dashboard-card,
.learning-path-card,
.training-course-card {
  border: 1px solid rgba(10, 75, 60, .12);
  border-radius: 8px;
  background: hsla(0, 0%, 100%, .95);
  box-shadow: 0 18px 36px rgba(10, 75, 60, .08)
}

.training-course-card {
  min-height: 360px;
  padding: 24px;
  display: flex;
  flex-direction: column
}

.training-course-card .h3,
.training-course-card h3 {
  margin: 22px 0 12px;
  color: #0a4b3c;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.35
}

.training-course-card p {
  margin: 0;
  color: #58645f;
  font-size: 15px;
  line-height: 1.8
}

.training-course-card ul {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 20px 0 28px;
  list-style: none
}

.training-course-card li {
  position: relative;
  padding-right: 18px;
  color: #26332e;
  font-size: 14px;
  font-weight: 800
}

.training-course-card li:before {
  content: "";
  position: absolute;
  top: 10px;
  right: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #af8033
}

.training-course-card--featured {
  background: linear-gradient(135deg, #fffaf1, #fff);
  border-color: rgba(175, 128, 51, .45)
}

.course-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px
}

.course-card-top i {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  background: #eef4f1;
  color: #0a4b3c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px
}

.assessment-card span,
.course-badge,
.path-duration {
  display: inline-flex;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(175, 128, 51, .12);
  color: #8f6425;
  font-size: 12px;
  font-weight: 900
}

.course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px
}

.course-meta span {
  padding: 7px 10px;
  border-radius: 999px;
  background: #eef4f1;
  color: #0a4b3c;
  font-size: 12px;
  font-weight: 900
}

.course-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  margin-top: 28px;
  padding: 0 18px;
  border-radius: 30px;
  background: #0a4b3c;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none
}

.training-course-card .course-action {
  margin-top: auto
}

.course-action--light {
  border: 1px solid rgba(10, 75, 60, .16);
  background: #fff;
  color: #0a4b3c
}

.learning-path-grid {
  display: grid;
  gap: 16px
}

.learning-path-card {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 24px;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .22s ease, border-color .18s ease
}

.learning-path-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px rgba(10, 75, 60, .14)
}

.path-card-go {
  color: #af8033;
  font-size: 18px;
  opacity: .5;
  transition: transform .18s ease, opacity .18s ease
}

.learning-path-card:hover .path-card-go {
  opacity: 1;
  transform: translateX(-6px)
}

.learning-path-card .h3,
.learning-path-card h3 {
  margin: 12px 0 8px;
  color: #0a4b3c;
  font-size: 28px;
  font-weight: 900
}

.learning-path-card p {
  max-width: 720px;
  margin: 0;
  color: #58645f;
  font-size: 15px;
  line-height: 1.8
}

.path-number {
  width: 76px;
  height: 76px;
  border-radius: 8px;
  background: #0a4b3c;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 900
}

.path-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px
}

.path-steps span {
  padding: 8px 12px;
  border-radius: 999px;
  background: #eef4f1;
  color: #0a4b3c;
  font-size: 12px;
  font-weight: 900
}

.courses-assessments {
  background: linear-gradient(135deg, rgba(10, 75, 60, .08), rgba(175, 128, 51, .08))
}

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

.assessment-card {
  min-height: 310px;
  padding: 24px;
  display: flex;
  flex-direction: column
}

.assessment-card>i {
  width: 58px;
  height: 58px;
  margin-bottom: 22px;
  border-radius: 8px;
  background: #0a4b3c;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px
}

.assessment-card .h3,
.assessment-card h3 {
  margin: 14px 0 10px;
  color: #0a4b3c;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.35
}

.assessment-card p {
  margin: 0;
  color: #58645f;
  font-size: 15px;
  line-height: 1.75
}

.assessment-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: auto;
  border: 1px solid rgba(10, 75, 60, .18);
  border-radius: 30px;
  color: #0a4b3c;
  font-weight: 900;
  text-decoration: none
}

.courses-dashboard-card {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr);
  gap: 28px;
  align-items: center;
  padding: 30px
}

.courses-dashboard-card .h2,
.courses-dashboard-card h2 {
  margin: 10px 0 12px;
  color: #0a4b3c;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 900;
  line-height: 1.2
}

.courses-dashboard-card p {
  max-width: 620px;
  margin: 0;
  color: #58645f;
  font-size: 16px;
  line-height: 1.8
}

.progress-preview-list {
  display: grid;
  gap: 16px
}

.progress-preview-list div {
  padding: 16px;
  border: 1px solid rgba(10, 75, 60, .1);
  border-radius: 8px;
  background: #fbfaf6
}

.progress-preview-list .small,
.progress-preview-list small,
.progress-preview-list strong {
  display: block
}

.progress-preview-list strong {
  color: #17211e;
  font-size: 15px;
  font-weight: 900
}

.progress-preview-list .small,
.progress-preview-list small {
  margin-top: 8px;
  color: #66716c;
  font-size: 12px;
  font-weight: 800
}

.progress-preview-list span {
  position: relative;
  display: block;
  height: 10px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(10, 75, 60, .1)
}

.progress-preview-list span:after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress);
  border-radius: inherit;
  background: linear-gradient(90deg, #af8033, #0a4b3c)
}

@media(max-width:992px) {

  .courses-dashboard-card,
  .courses-hero-grid {
    grid-template-columns: 1fr
  }

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

@media(max-width:576px) {

  .courses-assessments,
  .courses-catalog-section,
  .courses-dashboard-preview,
  .courses-hero,
  .courses-path-section {
    padding: 48px 0
  }

  .courses-hero-copy .h1,
  .courses-hero-copy h1,
  .courses-section-head .h2,
  .courses-section-head h2 {
    font-size: 30px
  }

  .courses-hero-copy p {
    font-size: 15px
  }

  .assessment-card,
  .courses-dashboard-card,
  .courses-progress-card,
  .training-course-card {
    padding: 18px
  }

  .assessment-grid,
  .courses-progress-card,
  .learning-path-card,
  .training-course-grid {
    grid-template-columns: 1fr
  }

  .courses-section-row {
    align-items: stretch;
    flex-direction: column
  }

  .learning-path-card {
    gap: 14px
  }

  .path-card-go {
    display: none
  }

  .courses-progress-ring {
    width: 92px;
    height: 92px
  }
}

.material-view-page {
  background: #f7f5ed;
  color: #17211e;
  font-family: thmanyahsans, sans-serif
}

.material-view-shell {
  background: radial-gradient(circle at 16% 4%, rgba(175, 128, 51, .12), transparent 34%), linear-gradient(180deg, #fbfaf4, #f7f5ed)
}

.material-view-hero {
  padding: 42px 0 34px;
  border-bottom: 1px solid rgba(10, 75, 60, .1)
}

.view-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  color: #0a4b3c;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none
}

.view-back-link:hover {
  color: #af8033
}

.material-view-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 28px;
  align-items: center
}

@media(max-width:640px) {
  .material-view-head {
    grid-template-columns: 1fr
  }
}

.material-view-title-block {
  max-width: 980px
}

.material-view-title-block .h1,
.material-view-title-block h1 {
  margin: 12px 0 14px;
  color: #0a4b3c;
  font-size: clamp(36px, 5vw, 74px);
  font-weight: 900;
  line-height: 1.12
}

.material-view-title-block p {
  margin: 0;
  color: #65716c;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.8
}

.view-pill {
  display: inline-flex;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(175, 128, 51, .12);
  color: #8c6424;
  font-size: 13px;
  font-weight: 900
}

.material-view-icon {
  width: 112px;
  height: 112px;
  border-radius: 8px;
  background: #fff;
  color: #0a4b3c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  box-shadow: 0 18px 38px rgba(10, 75, 60, .1)
}

@media(max-width:640px) {
  .material-view-icon {
    width: 76px;
    height: 76px;
    font-size: 28px
  }
}

.material-view-content {
  padding: 36px 0 72px
}

.material-view-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 22px;
  align-items: start
}

@media(max-width:992px) {
  .material-view-layout {
    grid-template-columns: 1fr
  }
}

.material-actions-panel,
.material-preview-panel,
.related-material-card {
  border: 1px solid rgba(10, 75, 60, .12);
  border-radius: 8px;
  background: hsla(0, 0%, 100%, .96);
  box-shadow: 0 20px 42px rgba(10, 75, 60, .08)
}

.material-preview-panel {
  overflow: hidden
}

.preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(10, 75, 60, .1);
  background: #fff
}

.preview-toolbar span {
  color: #17211e;
  font-size: 16px;
  font-weight: 900
}

.preview-toolbar strong {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(10, 75, 60, .08);
  color: #0a4b3c;
  font-size: 12px;
  font-weight: 900
}

@media(max-width:560px) {
  .preview-toolbar {
    align-items: flex-start;
    flex-direction: column
  }
}

.material-preview-surface {
  min-height: 480px;
  padding: 44px;
  background: linear-gradient(135deg, rgba(10, 75, 60, .04), transparent 38%), #fffdf8
}

.material-preview-surface .h3,
.material-preview-surface h3 {
  margin: 0 0 12px;
  color: #0a4b3c;
  font-size: 24px;
  font-weight: 900
}

.material-preview-surface p {
  max-width: 820px;
  margin: 0 0 34px;
  color: #4e5c57;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.9
}

@media(max-width:640px) {
  .material-preview-surface {
    min-height: 360px;
    padding: 26px
  }
}

.package-material-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(10, 75, 60, .1);
  background: #fff
}

.package-material-tab {
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(10, 75, 60, .12);
  border-radius: 8px;
  background: #fbfaf6;
  color: #33413c;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease
}

.package-material-tab i {
  color: #0a4b3c
}

.package-material-tab.is-active,
.package-material-tab:hover {
  border-color: #0a4b3c;
  background: #0a4b3c;
  color: #fff
}

.package-material-tab.is-active i,
.package-material-tab:hover i {
  color: #fff
}

.material-preview-visual {
  min-height: 230px;
  margin-bottom: 28px;
  border: 1px solid rgba(10, 75, 60, .1);
  border-radius: 8px;
  background: #f5f1e7;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a4b3c
}

.preview-audio-icon {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: hsla(0, 0%, 100%, .94);
  color: #0a4b3c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: 0 18px 34px rgba(10, 75, 60, .2)
}

.video-player-frame,
.video-player-frame video {
  width: 100%;
  background: #101816
}

.video-player-frame video {
  aspect-ratio: 16/9;
  display: block
}

.video-player-caption {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #0a4b3c;
  color: #fff;
  font-size: 13px;
  font-weight: 900
}

.audio-player-card {
  width: min(620px, 100%);
  padding: 22px;
  border: 1px solid rgba(10, 75, 60, .1);
  border-radius: 8px;
  background: #fff;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  box-shadow: 0 18px 36px rgba(10, 75, 60, .1)
}

.audio-player-card strong {
  display: block;
  margin-bottom: 4px;
  color: #0a4b3c;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.45
}

.audio-player-card span {
  color: #8c6424;
  font-size: 13px;
  font-weight: 900
}

.audio-player-card audio {
  grid-column: 1/-1;
  width: 100%
}

@media(max-width:560px) {
  .audio-player-card {
    grid-template-columns: 1fr
  }
}

.preview-waveform {
  display: flex;
  align-items: center;
  gap: 7px
}

.preview-waveform span {
  width: 8px;
  border-radius: 999px;
  background: #0a4b3c
}

.preview-waveform span:first-child {
  height: 26px
}

.preview-waveform span:nth-child(2) {
  height: 54px
}

.preview-waveform span:nth-child(3) {
  height: 36px
}

.preview-waveform span:nth-child(4) {
  height: 68px
}

.preview-waveform span:nth-child(5) {
  height: 42px
}

.preview-waveform span:nth-child(6) {
  height: 30px
}

.book-reader-preview {
  width: 100%;
  min-height: 260px;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  background: #fff
}

.book-reader-preview aside {
  padding: 24px;
  background: linear-gradient(145deg, #0a4b3c, #0f6a55);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.book-reader-preview aside i {
  font-size: 28px
}

.book-reader-preview aside strong {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.5
}

.book-reader-preview aside span {
  color: hsla(0, 0%, 100%, .75);
  font-size: 12px;
  font-weight: 800
}

.book-reader-preview div {
  padding: 28px
}

.book-reader-preview .h4,
.book-reader-preview h4 {
  margin: 0 0 14px;
  color: #0a4b3c;
  font-size: 22px;
  font-weight: 900
}

.book-reader-preview p {
  margin: 0
}

@media(max-width:720px) {
  .book-reader-preview {
    grid-template-columns: 1fr
  }

  .book-reader-preview aside {
    min-height: 190px
  }
}

.preview-share-card {
  width: min(390px, 88%);
  min-height: 180px;
  padding: 24px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 34px rgba(10, 75, 60, .12)
}

.preview-share-card span {
  color: #af8033;
  font-size: 12px;
  font-weight: 900
}

.preview-share-card strong {
  display: block;
  margin: 16px 0 10px;
  color: #0a4b3c;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.35
}

.preview-share-card p {
  margin: 0;
  color: #65716c;
  font-size: 14px
}

.article-reader-preview {
  width: min(860px, 100%);
  padding: 32px;
  background: #fff
}

.article-reader-preview span {
  display: inline-flex;
  margin-bottom: 12px;
  color: #66736e;
  font-size: 13px;
  font-weight: 900
}

.article-reader-preview .h4,
.article-reader-preview h4 {
  margin: 0 0 14px;
  color: #0a4b3c;
  font-size: 26px;
  font-weight: 900
}

.article-reader-preview p {
  margin: 0
}

.material-actions-panel {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px
}

@media(max-width:992px) {
  .material-actions-panel {
    position: static
  }
}

.view-info-card {
  padding: 16px;
  border: 1px solid rgba(10, 75, 60, .1);
  border-radius: 8px;
  background: #fbfaf6
}

.view-info-card span {
  display: block;
  margin-bottom: 7px;
  color: #78837f;
  font-size: 12px;
  font-weight: 900
}

.view-info-card strong {
  color: #17211e;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.5
}

.view-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0 8px
}

.view-chip {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(10, 75, 60, .08);
  font-size: 11px
}

.view-action-btn,
.view-chip {
  display: inline-flex;
  color: #0a4b3c;
  font-weight: 900
}

.view-action-btn {
  min-height: 52px;
  border: 1px solid rgba(10, 75, 60, .14);
  border-radius: 30px;
  background: #fff;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease
}

.view-action-btn:hover {
  border-color: #af8033;
  color: #0a4b3c;
  transform: translateY(-1px)
}

.view-action-btn--primary {
  border-color: #0a4b3c;
  background: #0a4b3c;
  color: #fff
}

.view-action-btn--primary:hover {
  background: #083f33;
  color: #fff
}

.related-materials-section {
  padding: 0 0 86px
}

.related-materials-head {
  margin-bottom: 18px
}

.related-materials-head span {
  color: #af8033;
  font-size: 13px;
  font-weight: 900
}

.related-materials-head .h2,
.related-materials-head h2 {
  margin: 6px 0 0;
  color: #17211e;
  font-size: 28px;
  font-weight: 900
}

.related-materials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px
}

@media(max-width:900px) {
  .related-materials-grid {
    grid-template-columns: 1fr
  }
}

.related-material-card {
  min-height: 190px;
  padding: 18px;
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease
}

.related-material-card span {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(175, 128, 51, .12);
  color: #8c6424;
  font-size: 11px;
  font-weight: 900
}

.related-material-card .h3,
.related-material-card h3 {
  margin: 18px 0 8px;
  color: #0a4b3c;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.45
}

.related-material-card p {
  margin: 0;
  color: #65716c;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.8
}

.related-material-card:hover {
  border-color: #af8033;
  transform: translateY(-2px);
  box-shadow: 0 24px 46px rgba(10, 75, 60, .12)
}

.non-muslim-page {
  background: #f7f5ed;
  color: #17211e;
  font-family: thmanyahsans, sans-serif
}

.non-muslim-page #wrapper {
  overflow: visible
}

.non-muslim-shell {
  position: relative;
  overflow: hidden;
  background: url(data:image/svg+xml;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJwdWJsaWMvZm9udHMvY2VudGVycy1tYXAtYmcuc3ZnIjs=) top 48px left -160px/560px auto no-repeat, radial-gradient(circle at 15% 8%, rgba(175, 128, 51, .18), transparent 28%), radial-gradient(circle at 80% 18%, rgba(10, 75, 60, .14), transparent 26%), linear-gradient(180deg, #fbfaf4, #f7f5ed 48%, #fff)
}

.non-muslim-shell:after,
.non-muslim-shell:before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0
}

.non-muslim-shell:before {
  top: 138px;
  right: -90px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(10, 75, 60, .12);
  transform: rotate(18deg)
}

.non-muslim-shell:after {
  top: 520px;
  left: 6%;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(175, 128, 51, .18);
  transform: rotate(-14deg)
}

.non-muslim-shell>section {
  position: relative;
  z-index: 1
}

.nm-hero {
  padding: 86px 0 62px;
  border-bottom: 1px solid rgba(10, 75, 60, .1)
}

.nm-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 34px;
  align-items: center
}

@media(max-width:992px) {
  .nm-hero-grid {
    grid-template-columns: 1fr
  }
}

.nm-kicker,
.nm-section-head span,
.nm-share-panel span {
  color: #af8033;
  font-size: 14px;
  font-weight: 900
}

.nm-hero-copy {
  max-width: 840px
}

.nm-hero-copy .h1,
.nm-hero-copy h1 {
  margin: 12px 0 18px;
  color: #0a4b3c;
  font-size: clamp(42px, 6vw, 82px);
  font-weight: 900;
  line-height: 1.08
}

.nm-hero-copy p {
  max-width: 760px;
  margin: 0;
  color: #586661;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.9
}

.nm-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px
}

.nm-primary-link,
.nm-secondary-link {
  min-height: 52px;
  padding: 0 22px;
  border-radius: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none
}

.nm-primary-link {
  background: #0a4b3c;
  color: #fff
}

.nm-primary-link:hover {
  color: #fff;
  background: #083f33
}

.nm-secondary-link {
  border: 1px solid rgba(10, 75, 60, .18);
  background: hsla(0, 0%, 100%, .78);
  color: #0a4b3c
}

.nm-secondary-link:hover {
  border-color: #af8033;
  color: #0a4b3c
}

.nm-hero-visual {
  position: relative;
  min-height: 470px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(10, 75, 60, .12);
  background: #0a4b3c;
  box-shadow: 0 28px 60px rgba(10, 75, 60, .18)
}

.nm-hero-visual img {
  width: 100%;
  height: 100%;
  min-height: 470px;
  object-fit: cover;
  display: block;
  filter: saturate(.92) contrast(1.02)
}

.nm-hero-visual:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 75, 60, .04), rgba(10, 75, 60, .78)), linear-gradient(90deg, rgba(0, 0, 0, .18), transparent)
}

@media(max-width:992px) {

  .nm-hero-visual,
  .nm-hero-visual img {
    min-height: 390px
  }
}

.nm-dialogue-card {
  position: absolute;
  right: 20px;
  bottom: 20px;
  left: 20px;
  z-index: 1;
  padding: 24px;
  border: 1px solid rgba(175, 128, 51, .32);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(10, 75, 60, .95), rgba(10, 75, 60, .72)), #0a4b3c;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .24)
}

.nm-dialogue-card span {
  color: #d9b66d;
  font-size: 13px;
  font-weight: 900
}

.nm-dialogue-card strong {
  display: block;
  margin: 12px 0 14px;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.35
}

.nm-dialogue-card p {
  margin: 0;
  color: hsla(0, 0%, 100%, .74);
  font-size: 15px;
  line-height: 1.8
}

.nm-guidance {
  padding: 28px 0 16px
}

.nm-guidance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px
}

@media(max-width:900px) {
  .nm-guidance-grid {
    grid-template-columns: 1fr
  }
}

.nm-guidance article,
.nm-share-panel,
.nm-topic-card {
  border: 1px solid rgba(10, 75, 60, .12);
  border-radius: 8px;
  background: hsla(0, 0%, 100%, .94);
  box-shadow: 0 18px 36px rgba(10, 75, 60, .07)
}

.nm-guidance article {
  padding: 18px
}

.nm-guidance article span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(175, 128, 51, .14);
  color: #8c6424;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900
}

.nm-guidance article .h2,
.nm-guidance article h2 {
  margin: 14px 0 8px;
  color: #0a4b3c;
  font-size: 20px;
  font-weight: 900
}

.nm-guidance article p {
  margin: 0;
  color: #65716c;
  font-size: 14px;
  line-height: 1.75
}

.nm-topics {
  padding: 54px 0 76px
}

.nm-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px
}

.nm-section-head .h2,
.nm-section-head h2 {
  margin: 6px 0 0;
  color: #17211e;
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 900
}

@media(max-width:900px) {
  .nm-section-head {
    align-items: stretch;
    flex-direction: column
  }
}

.nm-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.nm-filter-pills button {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(10, 75, 60, .14);
  border-radius: 999px;
  background: #fff;
  color: #33413c;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer
}

.nm-filter-pills button.is-active,
.nm-filter-pills button:hover {
  border-color: #0a4b3c;
  background: #0a4b3c;
  color: #fff
}

.nm-topic-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px
}

@media(max-width:1200px) {
  .nm-topic-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

@media(max-width:900px) {
  .nm-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:620px) {
  .nm-topic-grid {
    grid-template-columns: 1fr
  }
}

.nm-topic-card {
  min-height: 286px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease
}

.nm-topic-card--featured {
  grid-column: span 2;
  background: linear-gradient(135deg, hsla(0, 0%, 100%, .95), rgba(255, 249, 236, .95)), #fff;
  border-color: rgba(175, 128, 51, .34)
}

@media(max-width:620px) {
  .nm-topic-card--featured {
    grid-column: auto
  }
}

.nm-topic-card:hover {
  border-color: #af8033;
  transform: translateY(-2px);
  box-shadow: 0 24px 46px rgba(10, 75, 60, .12)
}

.nm-topic-card .h3,
.nm-topic-card h3 {
  margin: 24px 0 10px;
  color: #0a4b3c;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.35
}

.nm-topic-card p {
  margin: 0;
  color: #5c6964;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.85
}

.nm-topic-media {
  height: 148px;
  margin: -18px -18px 16px;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  background: #0a4b3c
}

.nm-topic-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.9);
  transition: transform .3s ease
}

.nm-topic-card:hover .nm-topic-media img {
  transform: scale(1.04)
}

.nm-topic-label {
  align-self: flex-start;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(175, 128, 51, .12);
  color: #8c6424;
  font-size: 11px;
  font-weight: 900
}

.nm-card-footer {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 22px
}

.nm-card-footer a,
.nm-card-footer button {
  min-height: 40px;
  padding: 0 13px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none
}

.nm-card-footer button {
  border: 0;
  background: #0a4b3c;
  color: #fff;
  cursor: pointer
}

.nm-card-footer a {
  border: 1px solid rgba(10, 75, 60, .14);
  background: #fff;
  color: #0a4b3c;
  display: inline-flex;
  align-items: center
}

.nm-share-kit {
  padding: 0 0 86px
}

.nm-share-panel {
  padding: 38px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  border-color: rgba(175, 128, 51, .24);
  background: linear-gradient(135deg, rgba(10, 75, 60, .94), rgba(10, 75, 60, .78)), #0a4b3c;
  color: #fff;
  box-shadow: 0 26px 60px rgba(10, 75, 60, .18)
}

.nm-share-panel:before {
  inset: 0;
  background: linear-gradient(90deg, rgba(175, 128, 51, .22), transparent 46%), url(data:image/svg+xml;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJwdWJsaWMvZm9udHMvY2VudGVycy1tYXAtYmcuc3ZnIjs=) 0/420px auto no-repeat;
  opacity: .7
}

.nm-share-panel:after,
.nm-share-panel:before {
  content: "";
  position: absolute;
  pointer-events: none
}

.nm-share-panel:after {
  top: -70px;
  right: -70px;
  width: 220px;
  height: 220px;
  border: 1px solid hsla(0, 0%, 100%, .16);
  transform: rotate(18deg)
}

.nm-share-panel>* {
  position: relative;
  z-index: 1
}

.nm-share-panel span {
  display: inline-flex;
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;
  background: hsla(0, 0%, 100%, .1);
  color: #d9b66d
}

.nm-share-panel .h2,
.nm-share-panel h2 {
  max-width: 820px;
  margin: 14px 0 16px;
  color: #fff;
  font-size: clamp(30px, 4vw, 54px);
  font-weight: 900;
  line-height: 1.2
}

.nm-share-panel p {
  margin: 0;
  max-width: 880px;
  color: hsla(0, 0%, 100%, .78);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8
}

.nm-share-panel strong {
  display: block;
  max-width: 880px;
  margin-top: 18px;
  padding: 16px 18px;
  border-right: 4px solid #d9b66d;
  border-radius: 8px;
  background: hsla(0, 0%, 100%, .1);
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.8
}

.nm-share-panel button {
  min-height: 52px;
  padding: 0 22px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: #0a4b3c;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .16)
}

.nm-share-panel button:hover {
  background: #f4ead7;
  color: #0a4b3c
}

@media(max-width:768px) {
  .nm-share-panel {
    grid-template-columns: 1fr
  }
}

.contact-page {
  background: #f6f2e8;
  color: #17211e;
  font-family: thmanyahsans, sans-serif
}

.contact-page #wrapper {
  overflow: visible
}

.contact-shell {
  min-height: 100vh;
  background: radial-gradient(circle at 18% 12%, rgba(175, 128, 51, .15), transparent 26%), radial-gradient(circle at 82% 18%, rgba(10, 75, 60, .12), transparent 24%), linear-gradient(180deg, #fbfaf4, #f6f2e8 52%, #fff)
}

.contact-hero {
  padding: 82px 0 48px;
  border-bottom: 1px solid rgba(10, 75, 60, .1)
}

.contact-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 34px;
  align-items: end
}

@media(max-width:900px) {
  .contact-hero-grid {
    grid-template-columns: 1fr
  }
}

.contact-hero-grid .h1,
.contact-hero-grid h1 {
  max-width: 900px;
  margin: 12px 0 18px;
  color: #0a4b3c;
  font-size: clamp(42px, 6vw, 78px);
  font-weight: 900;
  line-height: 1.1
}

.contact-hero-grid p {
  max-width: 760px;
  margin: 0;
  color: #586661;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.95
}

.contact-form-head span,
.contact-kicker {
  color: #af8033;
  font-size: 14px;
  font-weight: 900
}

.contact-response-card {
  padding: 24px;
  border: 1px solid rgba(10, 75, 60, .13);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 20px 42px rgba(10, 75, 60, .08)
}

.contact-response-card span {
  color: #af8033;
  font-size: 13px;
  font-weight: 900
}

.contact-response-card strong {
  display: block;
  margin-top: 12px;
  color: #0a4b3c;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.2
}

.contact-response-card p {
  margin-top: 12px;
  color: #65716c;
  font-size: 14px;
  line-height: 1.75
}

.contact-main {
  padding: 42px 0 72px
}

.contact-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 18px;
  align-items: start
}

@media(max-width:992px) {
  .contact-layout {
    grid-template-columns: 1fr
  }
}

.contact-form-panel,
.contact-paths-grid article,
.contact-side-panel {
  border: 1px solid rgba(10, 75, 60, .12);
  border-radius: 8px;
  background: hsla(0, 0%, 100%, .94);
  box-shadow: 0 18px 36px rgba(10, 75, 60, .07)
}

.contact-side-panel {
  padding: 18px;
  display: grid;
  gap: 12px
}

.contact-info-card {
  padding: 16px;
  border: 1px solid rgba(10, 75, 60, .1);
  border-radius: 8px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  align-items: center
}

.contact-info-card i {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: rgba(10, 75, 60, .08);
  color: #0a4b3c;
  display: inline-flex;
  align-items: center;
  justify-content: center
}

.contact-info-card span {
  color: #7a8580;
  font-size: 12px;
  font-weight: 900
}

.contact-info-card strong {
  display: block;
  margin-top: 4px;
  color: #17211e;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.6
}

.contact-note {
  padding: 20px;
  border-radius: 8px;
  background: #0a4b3c;
  color: #fff
}

.contact-note .h2,
.contact-note h2 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 22px;
  font-weight: 900
}

.contact-note p {
  margin: 0;
  color: hsla(0, 0%, 100%, .76);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.85
}

.contact-form-panel {
  padding: 26px
}

.contact-form-head {
  margin-bottom: 22px
}

.contact-form-head .h2,
.contact-form-head h2 {
  margin: 8px 0 0;
  color: #0a4b3c;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900
}

.contact-form,
.contact-form-grid {
  display: grid;
  gap: 16px
}

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

@media(max-width:700px) {
  .contact-form-grid {
    grid-template-columns: 1fr
  }
}

.contact-form label {
  display: grid;
  gap: 8px
}

.contact-form label span {
  color: #2f3a36;
  font-size: 13px;
  font-weight: 900
}

.contact-form label input,
.contact-form label select,
.contact-form label textarea {
  width: 100%;
  border: 1px solid rgba(10, 75, 60, .18);
  border-radius: 8px;
  background: #fff;
  color: #17211e;
  font-size: 15px;
  font-weight: 700;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease
}

.contact-form label input:focus,
.contact-form label select:focus,
.contact-form label textarea:focus {
  border-color: #0a4b3c;
  box-shadow: 0 0 0 4px rgba(10, 75, 60, .12)
}

.contact-form label input,
.contact-form label select {
  min-height: 54px;
  padding: 0 16px
}

.contact-form label textarea {
  min-height: 170px;
  padding: 16px;
  resize: vertical
}

.contact-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding-top: 6px
}

.contact-form-actions button {
  min-height: 54px;
  padding: 0 24px;
  border: 0;
  border-radius: 30px;
  background: #0a4b3c;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer
}

.contact-form-actions p {
  max-width: 430px;
  margin: 0;
  color: #697570;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7
}

.contact-paths {
  padding: 0 0 86px
}

.contact-paths-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px
}

@media(max-width:900px) {
  .contact-paths-grid {
    grid-template-columns: 1fr
  }
}

.contact-paths-grid article {
  min-height: 210px;
  padding: 24px
}

.contact-paths-grid span {
  color: #af8033;
  font-size: 13px;
  font-weight: 900
}

.contact-paths-grid .h3,
.contact-paths-grid h3 {
  margin: 36px 0 10px;
  color: #0a4b3c;
  font-size: 25px;
  font-weight: 900
}

.contact-paths-grid p {
  margin: 0;
  color: #5f6c67;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.85
}

.btn-close {
  background: none;
  color: #222;
  opacity: inherit;
  display: flex;
  align-items: center;
  justify-content: center
}

.btn-close:hover {
  background: transparent;
  opacity: inherit
}

body,
html {
  overflow-x: hidden
}

body,
html,
img,
video {
  max-width: 100%
}

.mobile-filter-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 0 18px;
  border: 1px solid rgba(10, 75, 60, .18);
  border-radius: 8px;
  background: #0a4b3c;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(10, 75, 60, .16)
}

.mobile-filter-modal .modal-content {
  overflow: hidden;
  border: 1px solid rgba(10, 75, 60, .12);
  border-radius: 12px;
  background: #fff;
  color: #17211e;
  box-shadow: 0 22px 70px rgba(10, 75, 60, .18)
}

.mobile-filter-modal-footer,
.mobile-filter-modal-header {
  padding: 18px;
  border-color: rgba(10, 75, 60, .1)
}

.mobile-filter-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(10, 75, 60, .1)
}

.mobile-filter-modal-header span {
  display: inline-flex;
  margin-bottom: 4px;
  color: #af8033;
  font-size: 12px;
  font-weight: 800
}

.mobile-filter-modal-header .h2,
.mobile-filter-modal-header h2 {
  margin: 0;
  color: #0a4b3c;
  font-size: 22px;
  font-weight: 800
}

.mobile-filter-close {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #eef4f1;
  color: #0a4b3c;
  cursor: pointer
}

.mobile-filter-modal-body {
  display: grid;
  gap: 16px;
  padding: 18px
}

.mobile-filter-modal-footer {
  border-top: 1px solid rgba(10, 75, 60, .1)
}

.mobile-filter-apply {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 8px;
  background: #0a4b3c;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer
}

.home-navbar .container-xl {
  min-height: 64px
}

.home-navbar .navbar-brand {
  max-width: 180px
}

.home-navbar .navbar-brand .logo-img {
  width: auto;
  max-width: 160px;
  height: auto;
  max-height: 48px;
  object-fit: contain
}

.home-navbar .navbar-toggler {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(10, 75, 60, .16);
  border-radius: 8px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0
}

.mobile-nav-offcanvas {
  width: min(88vw, 360px) !important;
  max-width: 360px;
  background: #fff;
  color: #17211e
}

.mobile-nav-offcanvas .offcanvas-header {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  border-bottom: 1px solid rgba(10, 75, 60, .12)
}

.mobile-nav-offcanvas .btn-close {
  order: 2;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(10, 75, 60, .12);
  border-radius: 8px;
  background: #f7f5ed;
  color: #0a4b3c;
  opacity: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center
}

.mobile-nav-offcanvas .offcanvas-body {
  padding: 16px;
  overflow-y: auto
}

.mobile-offcanvas-brand {
  order: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  color: #0a4b3c;
  font-size: 16px;
  font-weight: 900
}

.mobile-offcanvas-brand span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.mobile-offcanvas-logo {
  width: auto !important;
  height: 42px !important;
  max-width: 118px !important;
  max-height: 42px !important;
  object-fit: contain;
  flex: 0 0 auto
}

.mobile-nav-accordion {
  display: grid;
  gap: 10px
}

.mobile-nav-acc-item .accordion-button,
.mobile-nav-link,
.mobile-sub-link {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(10, 75, 60, .12);
  border-radius: 8px;
  background: #fdfbf4;
  color: #0a4b3c;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: right;
  text-decoration: none;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4
}

.mobile-nav-acc-item .accordion-button:hover,
.mobile-nav-link:hover,
.mobile-sub-link:hover {
  color: #0a4b3c;
  background: #f4ead7
}

.mobile-nav-acc-item {
  border: 0;
  background: transparent
}

.mobile-nav-acc-item .accordion-button {
  box-shadow: none
}

.mobile-nav-acc-item .accordion-button:after {
  margin-right: auto;
  margin-left: 0
}

.mobile-nav-acc-item .accordion-body {
  padding: 8px 0 0
}

.mobile-sub-links {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none
}

@media(max-width:991.98px) {
  .home-navbar .container-xl {
    display: flex;
    align-items: center;
    gap: 12px
  }

  .home-navbar .navbar-brand {
    margin-left: 0;
    margin-right: 0;
    flex: 1 1 auto
  }

  .home-navbar .navbar-buttons,
  .home-navbar .navbar-collapse {
    display: none !important
  }

  .home-navbar .navbar-toggler {
    display: inline-flex
  }
}

@media(max-width:768px) {
  .container-xl {
    padding-right: 18px;
    padding-left: 18px
  }

  .about-intro-band,
  .centers-map-hero,
  .contact-hero,
  .hero-section,
  .library-hero,
  .material-view-hero,
  .nm-hero {
    padding-top: 52px;
    padding-bottom: 38px
  }

  .about-intro-copy .h1,
  .about-intro-copy h1,
  .centers-map-heading .h1,
  .centers-map-heading h1,
  .contact-hero-grid .h1,
  .contact-hero-grid h1,
  .hero-title,
  .library-hero-grid .h1,
  .library-hero-grid h1,
  .material-view-title-block .h1,
  .material-view-title-block h1,
  .nm-hero-copy .h1,
  .nm-hero-copy h1 {
    font-size: 34px;
    line-height: 1.18
  }

  .about-intro-copy p,
  .centers-map-heading p,
  .contact-hero-grid p,
  .hero-subtitle,
  .library-hero-grid p,
  .material-view-title-block p,
  .nm-hero-copy p {
    font-size: 15px;
    line-height: 1.85
  }

  .contact-response-card,
  .library-summary {
    min-width: 0;
    width: 100%
  }

  .centers-toolbar,
  .contact-form-panel,
  .contact-side-panel,
  .library-toolbar,
  .material-actions-panel,
  .material-preview-panel {
    padding: 16px
  }

  .centers-toolbar,
  .library-toolbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end;
    gap: 12px
  }

  .centers-search,
  .library-search {
    min-width: 0
  }

  .mobile-filter-toggle {
    display: inline-flex
  }

  .mobile-filter-modal-body .library-select {
    display: flex
  }

  .mobile-filter-modal-body .centers-filter-group {
    display: grid;
    grid-template-columns: 1fr
  }

  .about-model-grid article,
  .about-snapshot-grid article,
  .center-list-card,
  .contact-paths-grid article,
  .library-material-card,
  .nm-topic-card {
    min-height: auto
  }

  .centers-map-heading,
  .contact-hero-grid,
  .library-hero-grid,
  .material-view-head {
    align-items: stretch
  }

  .package-material-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px
  }

  .package-material-tab {
    white-space: nowrap;
    flex: 0 0 auto
  }

  .center-modal-grid {
    grid-template-columns: 1fr
  }

  .center-modal-media {
    min-height: 240px;
    max-height: 300px
  }

  .center-details-modal .modal-dialog {
    margin: 12px
  }
}

@media(max-width:576px) {
  .home-navbar .container-xl {
    min-height: 58px;
    padding-right: 14px;
    padding-left: 14px
  }

  .home-navbar .navbar-brand .logo-img {
    max-width: 124px;
    max-height: 38px
  }

  .home-navbar .navbar-toggler {
    width: 40px;
    height: 40px
  }

  .mobile-nav-offcanvas {
    width: 86vw !important
  }

  .mobile-offcanvas-logo {
    height: 36px !important;
    max-width: 96px !important
  }

  .mobile-offcanvas-brand span {
    font-size: 14px
  }

  .mobile-nav-acc-item .accordion-button,
  .mobile-nav-link,
  .mobile-sub-link {
    min-height: 46px;
    font-size: 14px
  }

  .container-xl {
    padding-right: 14px;
    padding-left: 14px
  }

  .about-intro-copy .h1,
  .about-intro-copy h1,
  .centers-map-heading .h1,
  .centers-map-heading h1,
  .contact-hero-grid .h1,
  .contact-hero-grid h1,
  .hero-title,
  .library-hero-grid .h1,
  .library-hero-grid h1,
  .material-view-title-block .h1,
  .material-view-title-block h1,
  .nm-hero-copy .h1,
  .nm-hero-copy h1 {
    font-size: 30px
  }

  .about-model-grid,
  .about-snapshot-grid,
  .centers-list,
  .contact-paths-grid,
  .library-grid,
  .nm-topic-grid,
  .related-materials-grid {
    grid-template-columns: 1fr !important
  }

  .centers-toolbar,
  .library-toolbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end;
    gap: 12px
  }

  .centers-search,
  .library-search {
    min-width: 0
  }

  .mobile-filter-toggle {
    display: inline-flex
  }

  .mobile-filter-modal-body .library-select {
    display: flex
  }

  .mobile-filter-modal-body .centers-filter-group {
    display: grid;
    grid-template-columns: 1fr
  }

  .filter-select-menu {
    max-height: 320px;
    overflow-y: auto
  }

  .contact-form-actions {
    align-items: stretch;
    flex-direction: column
  }

  .contact-form-actions button {
    width: 100%
  }
}

:root {
  --primary-color: #0a4b3c;
  --primary-dark: #0a4c3c;
  --accent-color: #af8033;
  --accent-gold: #c8a24d;
  --danger-color: #9e2a2b;
  --success-color: #1b5e3f;
  --text-secondary: #6b7280;
  --bg-light: #fdfbf4;
  --bg-white: #fff;
  --border-color: #e5e7eb;
  --bodyBg: #fff;
  --main-color: #0a4b3c;
  --second-color: #af8033;
  --text-dark-color: #1a1a1a;
  --warning-light: #fdfbf4;
  --beige: #fdfbf4;
  --beige2: #f5f3ed;
  --textWhite: #fff;
  --lemon: #e6e4c1;
  --defaultTextcolor: #6b7280;
  --roundedBtn: #e9e5d9;
  --roundedBtnColor: #dad7c5;
  --titleDarkColor: #1a1a1a;
  --inputBg: #fdfbf4;
  --offcanvasBg: #fdfbf4;
  --menuHover: #af8033;
  --tabsActive: #af8033;
  --outLineDanger: #9e2a2b;
  --dark-color: #1a1a1a;
  --progressBg: #f5f3ed
}

html {
  direction: ltr
}

body.rtl-mode,
body.rtl-mode #wrapper {
  direction: rtl
}

body [data-aos],
body [data-aos][data-aos],
body [data-aos][data-aos][data-aos-delay],
body [data-aos][data-aos][data-aos-duration] {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important
}

body:not(.aos-disabled) [data-aos] {
  transition-property: opacity, transform
}

.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05)
}

.gap-2 {
  gap: .5rem
}

.gap-3 {
  gap: .75rem
}

body {
  font-size: 15px;
  line-height: 1.75
}

.about-intro-copy .h1,
.about-intro-copy h1,
.centers-map-heading .h1,
.centers-map-heading h1,
.contact-hero-grid .h1,
.contact-hero-grid h1,
.courses-hero-copy .h1,
.courses-hero-copy h1,
.hero-title,
.library-hero-grid .h1,
.library-hero-grid h1,
.material-view-title-block .h1,
.material-view-title-block h1,
.nm-hero-copy .h1,
.nm-hero-copy h1 {
  font-size: clamp(34px, 4.4vw, 64px) !important;
  line-height: 1.16 !important
}

.about-intro-copy p,
.centers-map-heading p,
.contact-hero-grid p,
.courses-hero-copy p,
.hero-subtitle,
.library-hero-grid p,
.material-view-title-block p,
.nm-hero-copy p {
  font-size: 16px !important;
  line-height: 1.85 !important
}

.about-manifest-stack .h2,
.about-manifest-stack h2,
.about-section-title .h2,
.about-section-title h2,
.centers-list-header .h2,
.centers-list-header h2,
.contact-form-head .h2,
.contact-form-head h2,
.contact-note .h2,
.contact-note h2,
.courses-dashboard-card .h2,
.courses-dashboard-card h2,
.courses-section-head .h2,
.courses-section-head h2,
.library-results-head .h2,
.library-results-head h2,
.nm-section-head .h2,
.nm-section-head h2,
.preview-toolbar,
.related-materials-head .h2,
.related-materials-head h2 {
  font-size: clamp(24px, 3vw, 38px) !important;
  line-height: 1.25 !important
}

.fn-title {
  font-size: clamp(24px, 3vw, 36px) !important;
  line-height: 1.28 !important
}

.assessment-card .h3,
.assessment-card h3,
.center-list-card .h3,
.center-list-card h3,
.contact-paths-grid .h3,
.contact-paths-grid h3,
.learning-path-card .h3,
.learning-path-card h3,
.library-material-card .h3,
.library-material-card h3,
.material-preview-surface .h3,
.material-preview-surface h3,
.nm-topic-card .h3,
.nm-topic-card h3,
.related-material-card .h3,
.related-material-card h3,
.training-course-card .h3,
.training-course-card h3 {
  font-size: clamp(18px, 2vw, 24px) !important;
  line-height: 1.4 !important
}

.about-model-grid .h3,
.about-model-grid h3,
.about-snapshot-grid strong,
.contact-response-card strong,
.courses-progress-ring strong,
.library-summary strong {
  font-size: clamp(24px, 3vw, 32px) !important;
  line-height: 1.15 !important
}

.about-model-grid p,
.assessment-card p,
.center-list-card p,
.contact-paths-grid p,
.courses-dashboard-card p,
.learning-path-card p,
.library-material-card p,
.nm-topic-card p,
.related-material-card p,
.training-course-card p {
  font-size: 14px !important;
  line-height: 1.75 !important
}

.assessment-card a,
.course-action,
.fn-subtitle,
.footer-desc,
.footer-links a,
.mobile-nav-acc-item .accordion-button,
.mobile-nav-link,
.mobile-sub-link,
.nav-menu .nav-link {
  font-size: 14px !important
}

.mobile-nav-link,
.mobile-sub-link,
.nav-menu .nav-link,
.nav-menu .nav-link:focus,
.nav-menu .nav-link:hover {
  text-decoration: none !important
}

.home-navbar .nav-menu {
  gap: 18px !important
}

@media(max-width:768px) {

  .about-intro-copy .h1,
  .about-intro-copy h1,
  .centers-map-heading .h1,
  .centers-map-heading h1,
  .contact-hero-grid .h1,
  .contact-hero-grid h1,
  .courses-hero-copy .h1,
  .courses-hero-copy h1,
  .hero-title,
  .library-hero-grid .h1,
  .library-hero-grid h1,
  .material-view-title-block .h1,
  .material-view-title-block h1,
  .nm-hero-copy .h1,
  .nm-hero-copy h1 {
    font-size: 30px !important;
    line-height: 1.2 !important
  }

  .about-intro-copy p,
  .centers-map-heading p,
  .contact-hero-grid p,
  .courses-hero-copy p,
  .hero-subtitle,
  .library-hero-grid p,
  .material-view-title-block p,
  .nm-hero-copy p {
    font-size: 14px !important
  }

  .about-manifest-stack .h2,
  .about-manifest-stack h2,
  .about-section-title .h2,
  .about-section-title h2,
  .centers-list-header .h2,
  .centers-list-header h2,
  .contact-form-head .h2,
  .contact-form-head h2,
  .courses-dashboard-card .h2,
  .courses-dashboard-card h2,
  .courses-section-head .h2,
  .courses-section-head h2,
  .library-results-head .h2,
  .library-results-head h2,
  .nm-section-head .h2,
  .nm-section-head h2,
  .related-materials-head .h2,
  .related-materials-head h2 {
    font-size: 24px !important
  }
}

:root,
body:not(.dark-mode) {
  --page-bg: #f5f6f7;
  --page-text: #181d27;
  --surface-1: #fff;
  --surface-2: #f6f6f6;
  --surface-3: #ececed;
  --surface-card: #1a2230;
  --border-soft: #cad2cd;
  --border-strong: #2f3d52;
  --brand-green: #046a38;
  --brand-green-hover: #035430;
  --brand-green-soft: rgba(4, 106, 56, 0.08);
  --brand-accent: #8ce7af;
  --brand-warn: #f0c800;
  --text-primary: #181d27;
  --text-secondary: #4a5466;
  --text-inverse: #e7edf8;
  --nav-bg: hsla(0, 0%, 100%, 0.97);
  --nav-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  --dropdown-bg: #fff;
  --footer-bg: linear-gradient(178deg, #046a38 27%, #d56738 169%);
  --footer-text: hsla(0, 0%, 100%, 0.8);
  --footer-text-strong: #fff;
  --footer-link-hover: #f0c800;
  --field-bg: #fff;
  --field-text: #1b202b;
  --overlay-hero: rgba(4, 106, 56, 0.56)
}

body.dark-mode {
  --page-bg: #11161f;
  --page-text: #e7edf8;
  --surface-1: #1a2230;
  --surface-2: #1a2230;
  --surface-3: #131b27;
  --surface-card: #1a2230;
  --border-soft: #2f3d52;
  --border-strong: #41526f;
  --brand-green: #2f9c63;
  --brand-green-hover: #267f51;
  --brand-green-soft: rgba(47, 156, 99, 0.18);
  --brand-accent: #8ce7af;
  --brand-warn: #f0c800;
  --text-primary: #e7edf8;
  --text-secondary: rgba(231, 237, 248, 0.74);
  --text-inverse: #fff;
  --nav-bg: rgba(17, 22, 31, 0.94);
  --nav-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
  --dropdown-bg: #1a2230;
  --footer-bg: linear-gradient(178deg, #0d3f2b 27%, #5c3a29 169%);
  --footer-text: rgba(231, 237, 248, 0.82);
  --footer-text-strong: #e7edf8;
  --footer-link-hover: #ffe189;
  --field-bg: #1a2230;
  --field-text: #e7edf8;
  --overlay-hero: rgba(0, 0, 0, 0.62)
}

.btn,
.filter-select-wrap,
.home-navbar,
body {
  transition: background-color .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease
}

body {
  background: var(--page-bg);
  color: var(--page-text)
}

.home-navbar,
.home-navbar.headroom--not-top {
  background: var(--nav-bg) !important;
  box-shadow: var(--nav-shadow)
}

.home-navbar .navbar-nav .dropdown-menu .dropdown-item,
.home-navbar .navbar-nav .nav-link {
  color: var(--text-primary)
}

.home-navbar .navbar-nav .dropdown-menu .dropdown-item:hover,
.home-navbar .navbar-nav .nav-link.active,
.home-navbar .navbar-nav .nav-link:hover {
  color: var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 14%, transparent)
}

.home-navbar .dropdown-menu {
  background: var(--dropdown-bg);
  box-shadow: 0 16px 28px rgba(0, 0, 0, .2)
}

body.dark-mode .mobile-nav-offcanvas {
  background: var(--surface-1);
  color: var(--text-primary)
}

body.dark-mode .mobile-nav-offcanvas .offcanvas-header {
  border-color: rgba(231, 237, 248, .18)
}

body.dark-mode .mobile-nav-offcanvas .mobile-nav-acc-item .accordion-button,
body.dark-mode .mobile-nav-offcanvas .mobile-nav-link,
body.dark-mode .mobile-nav-offcanvas .mobile-offcanvas-brand,
body.dark-mode .mobile-nav-offcanvas .mobile-sub-link {
  color: var(--text-primary)
}

body.dark-mode .mobile-nav-offcanvas .mobile-nav-acc-item,
body.dark-mode .mobile-nav-offcanvas .mobile-nav-link,
body.dark-mode .mobile-nav-offcanvas .mobile-sub-link {
  background: var(--surface-3);
  border-color: rgba(231, 237, 248, .2)
}

body.dark-mode .mobile-nav-offcanvas .mobile-nav-acc-item .accordion-button:not(.collapsed) {
  background: rgba(143, 229, 182, .14);
  color: #bff7d9
}

body.dark-mode .mobile-nav-offcanvas .mobile-nav-acc-item .accordion-body {
  border-top-color: rgba(231, 237, 248, .16)
}

#wrapper,
body.dark-mode .about-section {
  background: var(--page-bg)
}

body.dark-mode .about-section-title {
  color: var(--text-primary)
}

body.dark-mode .filter-select-wrap {
  background: var(--field-bg);
  border-color: var(--border-soft);
  color: var(--field-text)
}

body.dark-mode .filter-select,
body.dark-mode .filter-select-trigger,
body.dark-mode .filter-select-wrap i {
  color: var(--field-text)
}

body.dark-mode .filter-select-wrap {
  box-shadow: none
}

body.dark-mode .filter-select-wrap.is-open {
  border-color: var(--brand-green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-green) 22%, transparent)
}

body.dark-mode .filter-select-menu {
  background: var(--surface-1);
  border-color: var(--border-soft);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .35)
}

body.dark-mode .filter-select-search-wrap {
  border-bottom-color: var(--border-soft)
}

body.dark-mode .filter-select-search {
  background: #1a2a3d;
  border-color: var(--border-soft);
  color: var(--text-primary)
}

body.dark-mode .filter-select-search:focus {
  border-color: var(--brand-green);
  background: #162335
}

body.dark-mode .filter-select-option:hover {
  background: #1b3344;
  color: #d6f3e1
}

body.dark-mode .filter-select-option.is-active {
  background: var(--brand-green);
  color: var(--text-inverse)
}

body.dark-mode .library-search {
  background: var(--field-bg);
  border: 1px solid var(--border-soft)
}

body.dark-mode .library-search input {
  color: var(--field-text)
}

body.dark-mode .lib-card {
  background: var(--surface-1);
  border-color: color-mix(in srgb, var(--text-primary) 12%, transparent);
  box-shadow: 0 16px 30px rgba(0, 0, 0, .28)
}

body.dark-mode .lib-card .lib-card-body .small,
body.dark-mode .lib-card .lib-card-body small {
  color: var(--text-secondary)
}

body.dark-mode .lib-card .lib-card-body .h3,
body.dark-mode .lib-card .lib-card-body h3 {
  color: var(--text-primary)
}

body.dark-mode.about-page,
body.dark-mode.centers-map-page,
body.dark-mode.contact-page,
body.dark-mode.courses-page,
body.dark-mode.library-page,
body.dark-mode.material-view-page,
body.dark-mode.non-muslim-page,
body.dark-mode.rtl-mode {
  background: var(--page-bg);
  color: var(--text-primary)
}

body.dark-mode .site-footer {
  background: #0c121b;
  color: var(--footer-text)
}

body.dark-mode .footer-bottom,
body.dark-mode .footer-main,
body.dark-mode .footer-newsletter {
  background: #0c121b
}

body.dark-mode .footer-divider {
  border-color: rgba(231, 237, 248, .14)
}

body.dark-mode .fn-title,
body.dark-mode .footer-copyright,
body.dark-mode .footer-heading {
  color: var(--footer-text-strong)
}

body.dark-mode .fn-subtitle,
body.dark-mode .footer-desc,
body.dark-mode .footer-legal a,
body.dark-mode .footer-links a {
  color: var(--footer-text)
}

body.dark-mode .footer-legal a:hover,
body.dark-mode .footer-links a:hover {
  color: var(--footer-link-hover)
}

body.dark-mode .fn-input {
  background: var(--field-bg);
  border-color: var(--border-soft);
  color: var(--field-text)
}

body.dark-mode .fn-input::placeholder {
  color: rgba(231, 237, 248, .48)
}

body.dark-mode .footer-social a {
  background: rgba(231, 237, 248, .08);
  border-color: rgba(231, 237, 248, .16);
  color: var(--footer-text-strong)
}

body.dark-mode .account-btn,
body.dark-mode .btn-icon {
  border-color: var(--border-soft)
}

body.dark-mode .btn-icon {
  background: var(--surface-1);
  color: var(--text-primary)
}

body.dark-mode .account-btn {
  background: var(--brand-green);
  color: var(--text-inverse)
}

body.dark-mode .about-page-shell,
body.dark-mode .centers-map-shell,
body.dark-mode .contact-shell,
body.dark-mode .courses-shell,
body.dark-mode .library-page-shell,
body.dark-mode .material-view-shell,
body.dark-mode .non-muslim-shell {
  background: radial-gradient(circle at 16% 10%, rgba(47, 156, 99, .12), transparent 26%), radial-gradient(circle at 84% 18%, rgba(240, 200, 0, .08), transparent 24%), linear-gradient(180deg, #101722, #11161f 52%, #0c121b);
  color: var(--text-primary)
}

body.dark-mode .about-audience,
body.dark-mode .about-intro-band,
body.dark-mode .contact-hero,
body.dark-mode .contact-paths,
body.dark-mode .courses-hero,
body.dark-mode .library-hero,
body.dark-mode .material-view-hero,
body.dark-mode .nm-hero {
  background: transparent;
  border-color: rgba(231, 237, 248, .12)
}

body.dark-mode .centers-map-hero {
  background: linear-gradient(90deg, rgba(17, 22, 31, .94), rgba(17, 22, 31, .76) 45%, rgba(17, 22, 31, .3)), url(../public/images/centers-hero.png) 50%/cover no-repeat;
  border-color: rgba(231, 237, 248, .12)
}

body.dark-mode .about-intro-copy .h1,
body.dark-mode .about-intro-copy h1,
body.dark-mode .about-section-title .h2,
body.dark-mode .about-section-title h2,
body.dark-mode .assessment-card .h3,
body.dark-mode .assessment-card h3,
body.dark-mode .centers-map-heading .h1,
body.dark-mode .centers-map-heading h1,
body.dark-mode .contact-form-head .h2,
body.dark-mode .contact-form-head h2,
body.dark-mode .contact-hero-grid .h1,
body.dark-mode .contact-hero-grid h1,
body.dark-mode .courses-dashboard-card .h2,
body.dark-mode .courses-dashboard-card h2,
body.dark-mode .courses-hero-copy .h1,
body.dark-mode .courses-hero-copy h1,
body.dark-mode .courses-section-head .h2,
body.dark-mode .courses-section-head h2,
body.dark-mode .learning-path-card .h3,
body.dark-mode .learning-path-card h3,
body.dark-mode .library-hero-grid .h1,
body.dark-mode .library-hero-grid h1,
body.dark-mode .material-view-title-block .h1,
body.dark-mode .material-view-title-block h1,
body.dark-mode .nm-hero-copy .h1,
body.dark-mode .nm-hero-copy h1,
body.dark-mode .nm-section-head .h2,
body.dark-mode .nm-section-head h2,
body.dark-mode .progress-preview-list strong,
body.dark-mode .related-materials-head .h2,
body.dark-mode .related-materials-head h2,
body.dark-mode .training-course-card .h3,
body.dark-mode .training-course-card h3 {
  color: var(--text-primary)
}

body.dark-mode .about-intro-copy p,
body.dark-mode .about-section-title p,
body.dark-mode .centers-map-heading p,
body.dark-mode .contact-hero-grid p,
body.dark-mode .courses-hero-copy p,
body.dark-mode .library-hero-grid p,
body.dark-mode .material-view-title-block p,
body.dark-mode .nm-hero-copy p,
body.dark-mode .related-materials-head span {
  color: var(--text-secondary)
}

body.dark-mode .about-section-title span,
body.dark-mode .centers-map-kicker,
body.dark-mode .contact-form-head span,
body.dark-mode .contact-kicker,
body.dark-mode .courses-kicker,
body.dark-mode .courses-panel-label,
body.dark-mode .courses-section-head span,
body.dark-mode .library-kicker,
body.dark-mode .nm-kicker,
body.dark-mode .nm-section-head span,
body.dark-mode .view-back-link,
body.dark-mode .view-pill {
  color: #ffe189
}

body.dark-mode .about-model-grid article,
body.dark-mode .about-snapshot-grid,
body.dark-mode .about-snapshot-grid article,
body.dark-mode .center-list-card,
body.dark-mode .centers-list-panel,
body.dark-mode .centers-toolbar,
body.dark-mode .contact-form-panel,
body.dark-mode .contact-info-card,
body.dark-mode .contact-paths-grid article,
body.dark-mode .contact-response-card,
body.dark-mode .contact-side-panel,
body.dark-mode .courses-progress-card,
body.dark-mode .library-material-card,
body.dark-mode .library-summary,
body.dark-mode .library-toolbar,
body.dark-mode .material-actions-panel,
body.dark-mode .material-preview-panel,
body.dark-mode .nm-guidance article,
body.dark-mode .nm-topic-card,
body.dark-mode .related-material-card,
body.dark-mode .view-info-card {
  background: var(--surface-1);
  border-color: rgba(231, 237, 248, .14);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .22)
}

body.dark-mode .about-model-grid,
body.dark-mode .about-snapshot-grid {
  border-color: rgba(231, 237, 248, .14)
}

body.dark-mode .about-audience-table strong,
body.dark-mode .about-model-grid .h3,
body.dark-mode .about-model-grid h3,
body.dark-mode .about-snapshot-grid strong,
body.dark-mode .center-list-card .h3,
body.dark-mode .center-list-card h3,
body.dark-mode .centers-list-header .h2,
body.dark-mode .centers-list-header h2,
body.dark-mode .contact-info-card strong,
body.dark-mode .contact-note .h2,
body.dark-mode .contact-note h2,
body.dark-mode .contact-paths-grid .h3,
body.dark-mode .contact-paths-grid h3,
body.dark-mode .contact-response-card strong,
body.dark-mode .courses-progress-card .h2,
body.dark-mode .courses-progress-card h2,
body.dark-mode .courses-progress-ring strong,
body.dark-mode .library-material-card .h3,
body.dark-mode .library-material-card h3,
body.dark-mode .library-results-head .h2,
body.dark-mode .library-results-head h2,
body.dark-mode .library-summary strong,
body.dark-mode .material-preview-surface .h3,
body.dark-mode .material-preview-surface h3,
body.dark-mode .nm-guidance article .h2,
body.dark-mode .nm-guidance article h2,
body.dark-mode .nm-topic-card .h3,
body.dark-mode .nm-topic-card h3,
body.dark-mode .preview-toolbar,
body.dark-mode .related-material-card .h3,
body.dark-mode .related-material-card h3,
body.dark-mode .view-info-card strong {
  color: var(--text-primary)
}

body.dark-mode .about-model-grid p,
body.dark-mode .about-snapshot-grid p,
body.dark-mode .assessment-card p,
body.dark-mode .center-list-card p,
body.dark-mode .centers-list-header span,
body.dark-mode .contact-form-actions p,
body.dark-mode .contact-info-card span,
body.dark-mode .contact-paths-grid p,
body.dark-mode .contact-response-card p,
body.dark-mode .courses-dashboard-card p,
body.dark-mode .courses-progress-card p,
body.dark-mode .courses-progress-ring span,
body.dark-mode .learning-path-card p,
body.dark-mode .library-material-card p,
body.dark-mode .library-results-head span,
body.dark-mode .library-summary span,
body.dark-mode .material-preview-surface p,
body.dark-mode .nm-guidance article p,
body.dark-mode .nm-topic-card p,
body.dark-mode .progress-preview-list .small,
body.dark-mode .progress-preview-list small,
body.dark-mode .related-material-card p,
body.dark-mode .training-course-card p,
body.dark-mode .view-info-card span {
  color: var(--text-secondary)
}

body.dark-mode .center-modal-tags span,
body.dark-mode .library-material-chip,
body.dark-mode .nm-topic-label,
body.dark-mode .view-chip {
  background: rgba(143, 229, 182, .12);
  color: #bff7d9
}

body.dark-mode .centers-filter,
body.dark-mode .course-meta span,
body.dark-mode .library-material-count,
body.dark-mode .package-material-tab,
body.dark-mode .path-steps span,
body.dark-mode .preview-toolbar strong,
body.dark-mode .progress-preview-list div,
body.dark-mode .view-pill {
  background: rgba(231, 237, 248, .07);
  border-color: rgba(231, 237, 248, .14);
  color: var(--text-primary)
}

body.dark-mode .assessment-card,
body.dark-mode .assessment-card a,
body.dark-mode .assessment-note,
body.dark-mode .course-action--light,
body.dark-mode .courses-dashboard-card,
body.dark-mode .courses-section-link,
body.dark-mode .learning-path-card,
body.dark-mode .training-course-card {
  background: var(--surface-1);
  border-color: rgba(231, 237, 248, .14);
  color: var(--text-primary)
}

body.dark-mode .training-course-card--featured {
  background: linear-gradient(135deg, rgba(175, 128, 51, .12), var(--surface-1))
}

body.dark-mode .assessment-card>i,
body.dark-mode .course-action,
body.dark-mode .course-card-top i,
body.dark-mode .path-number {
  background: var(--brand-green);
  color: var(--text-inverse)
}

body.dark-mode .assessment-card span,
body.dark-mode .course-badge,
body.dark-mode .path-duration {
  background: rgba(255, 225, 137, .1);
  color: #ffe189
}

body.dark-mode .centers-filter.is-active,
body.dark-mode .nm-filter-pills button.is-active,
body.dark-mode .nm-filter-pills button:hover,
body.dark-mode .package-material-tab.is-active {
  background: var(--brand-green);
  border-color: var(--brand-green);
  color: var(--text-inverse)
}

body.dark-mode .nm-filter-pills button {
  background: var(--surface-1);
  border-color: rgba(231, 237, 248, .14);
  color: var(--text-primary)
}

body.dark-mode .centers-search input,
body.dark-mode .contact-form input,
body.dark-mode .contact-form select,
body.dark-mode .contact-form textarea,
body.dark-mode .filter-select,
body.dark-mode .filter-select-trigger,
body.dark-mode .filter-select-wrap,
body.dark-mode .library-search input {
  background: var(--field-bg);
  border-color: var(--border-soft);
  color: var(--field-text)
}

body.dark-mode .centers-search input::placeholder,
body.dark-mode .contact-form input::placeholder,
body.dark-mode .contact-form textarea::placeholder,
body.dark-mode .library-search input::placeholder {
  color: rgba(231, 237, 248, .45)
}

body.dark-mode .centers-search span,
body.dark-mode .contact-form label span,
body.dark-mode .library-search span,
body.dark-mode .library-select span {
  color: var(--text-primary)
}

body.dark-mode .article-reader-preview,
body.dark-mode .audio-player-card,
body.dark-mode .book-reader-preview,
body.dark-mode .preview-share-card {
  background: #101722;
  border-color: rgba(231, 237, 248, .14);
  color: var(--text-primary)
}

body.dark-mode .book-reader-preview aside,
body.dark-mode .material-preview-visual,
body.dark-mode .preview-audio-icon {
  background: rgba(143, 229, 182, .1);
  color: #bff7d9
}

body.dark-mode .center-details-modal .modal-content {
  background: var(--surface-1);
  color: var(--text-primary)
}

body.dark-mode .center-modal-content,
body.dark-mode .center-modal-info div {
  background: var(--surface-1);
  border-color: rgba(231, 237, 248, .14)
}

body.dark-mode .center-modal-content .h2,
body.dark-mode .center-modal-content h2,
body.dark-mode .center-modal-info strong {
  color: var(--text-primary)
}

body.dark-mode .center-modal-description,
body.dark-mode .center-modal-info span {
  color: var(--text-secondary)
}

body.dark-mode .center-modal-close {
  background: var(--surface-1);
  color: var(--text-primary)
}

body.dark-mode .filter-select-menu,
body.dark-mode .mobile-filter-modal .modal-content {
  background: var(--surface-1);
  border-color: rgba(231, 237, 248, .14);
  color: var(--text-primary)
}

body.dark-mode .filter-select-search-wrap,
body.dark-mode .mobile-filter-modal-footer,
body.dark-mode .mobile-filter-modal-header {
  border-color: rgba(231, 237, 248, .14)
}

body.dark-mode .mobile-filter-modal-header .h2,
body.dark-mode .mobile-filter-modal-header h2 {
  color: var(--text-primary)
}

body.dark-mode .mobile-filter-close {
  background: rgba(231, 237, 248, .08);
  color: var(--text-primary)
}

body.dark-mode .filter-select-option {
  color: var(--text-primary)
}

body.dark-mode .filter-select-option.is-active,
body.dark-mode .filter-select-option:hover {
  background: rgba(143, 229, 182, .12);
  color: #bff7d9
}

body.dark-mode .about-manifest,
body.dark-mode .contact-note {
  background: #0b3329
}

body.dark-mode .about-audience-table,
body.dark-mode .about-audience-table div,
body.dark-mode .about-manifest-stack article {
  border-color: rgba(231, 237, 248, .14)
}

body.dark-mode .about-manifest-index strong,
body.dark-mode .about-manifest-stack .h2,
body.dark-mode .about-manifest-stack h2 {
  color: #fff
}

body.dark-mode .about-manifest-stack p,
body.dark-mode .contact-note p {
  color: rgba(231, 237, 248, .78)
}

body.dark-mode .center-share-btn,
body.dark-mode .contact-form-actions button,
body.dark-mode .nm-card-footer button,
body.dark-mode .view-action-btn--primary {
  background: var(--brand-green);
  color: var(--text-inverse)
}

body.dark-mode .nm-card-footer a,
body.dark-mode .nm-secondary-link,
body.dark-mode .view-action-btn {
  background: var(--surface-1);
  border-color: rgba(231, 237, 248, .14);
  color: var(--text-primary)
}

/* ==========================================================================
   Single course (course detail) page
   ========================================================================== */
.single-course-page {
  background: #f6f2e8
}

.single-course-shell {
  min-height: 100vh;
  background: radial-gradient(62% 48% at 12% -2%, rgba(175, 128, 51, .16), transparent 60%), radial-gradient(58% 50% at 90% 2%, rgba(10, 75, 60, .13), transparent 58%), radial-gradient(80% 72% at 50% 118%, rgba(10, 75, 60, .08), transparent 62%), linear-gradient(160deg, #fcf9f3 0%, #f5f0e6 55%, #eef3f0 100%);
  background-attachment: fixed;
  color: #17211e;
  font-family: thmanyahsans, sans-serif
}

.single-course-hero {
  padding: 42px 0 56px;
  border-bottom: 1px solid rgba(10, 75, 60, .1)
}

.sc-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 30px;
  color: #0a4b3c;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none
}

.sc-back-link:hover {
  color: #af8033
}

.sc-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
  gap: 34px;
  align-items: start
}

.sc-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px
}

.sc-badge,
.sc-track {
  display: inline-flex;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900
}

.sc-badge {
  background: rgba(175, 128, 51, .14);
  color: #8c6424
}

.sc-track {
  background: rgba(10, 75, 60, .1);
  color: #0a4b3c
}

.sc-hero-copy .h1,
.sc-hero-copy h1 {
  margin: 0 0 16px;
  color: #0a4b3c;
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  font-weight: 900;
  line-height: 1.12
}

.sc-hero-copy>p {
  max-width: 760px;
  margin: 0 0 26px;
  color: #4f5c58;
  font-size: 18px;
  line-height: 1.9
}

.sc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px
}

.sc-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid rgba(10, 75, 60, .12);
  border-radius: 999px;
  background: hsla(0, 0%, 100%, .9);
  color: #26332e;
  font-size: 13px;
  font-weight: 800
}

.sc-meta-chip i {
  color: #af8033;
  font-size: 13px
}

.sc-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px
}

.sc-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease
}

.sc-action--primary {
  background: #0a4b3c;
  color: #fff
}

.sc-action--primary:hover {
  background: #083f33;
  color: #fff;
  transform: translateY(-1px)
}

.sc-action--ghost {
  border-color: rgba(10, 75, 60, .18);
  background: #fff;
  color: #0a4b3c
}

.sc-action--ghost:hover {
  border-color: #af8033;
  transform: translateY(-1px)
}

.sc-action--block {
  width: 100%
}

.sc-hero-media {
  position: relative;
  margin: 0;
  border: 1px solid rgba(10, 75, 60, .12);
  border-radius: 8px;
  overflow: hidden;
  background: #eef4f1;
  box-shadow: 0 22px 44px rgba(10, 75, 60, .14)
}

.sc-hero-media img {
  display: block;
  width: 100%;
  height: 450px;
  object-fit: cover
}

.sc-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 46%, rgba(10, 75, 60, .55))
}

.sc-hero-media-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: hsla(0, 0%, 100%, .94);
  color: #0a4b3c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 12px 26px rgba(10, 75, 60, .22)
}

.sc-hero-media-caption {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  padding: 9px 16px;
  border-radius: 999px;
  background: hsla(0, 0%, 100%, .92);
  color: #0a4b3c;
  font-size: 13px;
  font-weight: 900
}

.sc-includes-card h3,
.sc-includes-card .h3 {
  margin: 0 0 16px;
  color: #0a4b3c;
  font-size: 18px;
  font-weight: 900
}

.sc-enroll-list {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none
}

.sc-enroll-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #26332e;
  font-size: 14px;
  font-weight: 700
}

.sc-enroll-list i {
  width: 20px;
  color: #af8033;
  text-align: center
}

.single-course-body {
  padding: 56px 0 72px
}

.sc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start
}

.sc-main {
  display: grid;
  gap: 18px
}

.sc-section {
  padding: 30px;
  border: 1px solid rgba(10, 75, 60, .12);
  border-radius: 8px;
  background: hsla(0, 0%, 100%, .96);
  box-shadow: 0 18px 36px rgba(10, 75, 60, .06)
}

.sc-section-kicker {
  display: inline-flex;
  color: #af8033;
  font-size: 13px;
  font-weight: 900
}

.sc-section .h2,
.sc-section h2 {
  margin: 8px 0 16px;
  color: #0a4b3c;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 900;
  line-height: 1.3
}

.sc-about p {
  margin: 0;
  color: #4f5c58;
  font-size: 16px;
  line-height: 1.95
}

.sc-outcomes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 0;
  margin: 0;
  list-style: none
}

.sc-outcomes li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(10, 75, 60, .1);
  border-radius: 8px;
  background: #fbfaf6;
  color: #26332e;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7
}

.sc-outcomes i {
  margin-top: 2px;
  color: #0a4b3c;
  font-size: 16px
}

.sc-curriculum-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px
}

.sc-curriculum-head .h2,
.sc-curriculum-head h2 {
  margin: 8px 0 0
}

.sc-curriculum-summary {
  display: inline-flex;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(10, 75, 60, .08);
  color: #0a4b3c;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap
}

.sc-modules {
  display: grid;
  gap: 12px
}

.sc-module {
  border: 1px solid rgba(10, 75, 60, .12);
  border-radius: 8px;
  background: #fbfaf6;
  overflow: hidden
}

.sc-module[open] {
  background: #fff;
  border-color: rgba(175, 128, 51, .35)
}

.sc-module-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  color: #0a4b3c;
  font-weight: 900
}

.sc-module-head::-webkit-details-marker {
  display: none
}

.sc-module-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px
}

.sc-module-caret {
  color: #af8033;
  font-size: 13px;
  transition: transform .2s ease
}

.sc-module[open] .sc-module-caret {
  transform: rotate(180deg)
}

.sc-module-count {
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(10, 75, 60, .08);
  color: #0a4b3c;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap
}

.sc-lessons {
  display: grid;
  gap: 2px;
  padding: 0 18px 14px
}

.sc-lesson {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #fbfaf6;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease
}

.sc-lesson:hover {
  background: #f2efe6;
  transform: translateX(-2px)
}

.sc-lesson-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #26332e;
  font-size: 14px;
  font-weight: 700
}

.sc-lesson-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px
}

.sc-lesson-go {
  color: #af8033;
  font-size: 12px;
  opacity: 0;
  transition: opacity .16s ease
}

.sc-lesson:hover .sc-lesson-go {
  opacity: 1
}

.sc-lesson-title i {
  color: #0a4b3c;
  font-size: 15px
}

.sc-lesson-meta {
  color: #78837f;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap
}

.sc-audience-list {
  display: grid;
  gap: 12px
}

.sc-audience-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(10, 75, 60, .1);
  border-radius: 8px;
  background: #fbfaf6;
  color: #26332e;
  font-size: 15px;
  font-weight: 700
}

.sc-audience-item i {
  color: #af8033;
  font-size: 16px
}

.sc-sidebar {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 16px
}

.sc-assessment-card,
.sc-includes-card,
.sc-info-card,
.sc-instructor-card {
  padding: 22px;
  border: 1px solid rgba(10, 75, 60, .12);
  border-radius: 8px;
  background: hsla(0, 0%, 100%, .96);
  box-shadow: 0 18px 36px rgba(10, 75, 60, .06)
}

.sc-info-card .h3,
.sc-info-card h3 {
  margin: 0 0 16px;
  color: #0a4b3c;
  font-size: 18px;
  font-weight: 900
}

.sc-info-list {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none
}

.sc-info-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(10, 75, 60, .08)
}

.sc-info-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0
}

.sc-info-list span {
  color: #78837f;
  font-size: 13px;
  font-weight: 800
}

.sc-info-list strong {
  color: #17211e;
  font-size: 14px;
  font-weight: 900
}

.sc-instructor {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px
}

.sc-instructor-avatar {
  width: 58px;
  height: 58px;
  flex: none;
  border-radius: 50%;
  background: #eef4f1;
  color: #0a4b3c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px
}

.sc-instructor strong {
  display: block;
  color: #0a4b3c;
  font-size: 16px;
  font-weight: 900
}

.sc-instructor span {
  display: block;
  margin-top: 3px;
  color: #66716c;
  font-size: 13px;
  font-weight: 700
}

.sc-assessment-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center
}

.sc-assessment-card>i {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: #0a4b3c;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px
}

.sc-assessment-card strong {
  display: block;
  color: #0a4b3c;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.4
}

.sc-assessment-card p {
  margin: 4px 0 0;
  color: #66716c;
  font-size: 13px;
  line-height: 1.6
}

.sc-assessment-card a {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 1px solid rgba(10, 75, 60, .18);
  border-radius: 30px;
  color: #0a4b3c;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease
}

.sc-assessment-card a:hover {
  border-color: #af8033;
  background: #fbfaf6
}

@media(max-width:992px) {

  .sc-hero-grid,
  .sc-layout {
    grid-template-columns: 1fr
  }

  .sc-sidebar {
    position: static
  }
}

@media(max-width:576px) {

  .single-course-body,
  .single-course-hero {
    padding: 40px 0
  }

  .sc-section {
    padding: 22px
  }

  .sc-outcomes {
    grid-template-columns: 1fr
  }

  .sc-curriculum-head {
    align-items: flex-start;
    flex-direction: column
  }

  .sc-hero-actions .sc-action {
    flex: 1
  }
}

/* Single course - dark mode */
body.dark-mode .single-course-shell {
  background: radial-gradient(circle at 16% 10%, rgba(47, 156, 99, .12), transparent 26%), radial-gradient(circle at 84% 18%, rgba(240, 200, 0, .08), transparent 24%), linear-gradient(180deg, #101722, #11161f 52%, #0c121b);
  color: var(--text-primary)
}

body.dark-mode .single-course-hero {
  border-color: rgba(231, 237, 248, .12)
}

body.dark-mode .sc-back-link,
body.dark-mode .sc-section-kicker {
  color: #ffe189
}

body.dark-mode .sc-hero-copy .h1,
body.dark-mode .sc-hero-copy h1,
body.dark-mode .sc-section .h2,
body.dark-mode .sc-section h2,
body.dark-mode .sc-info-card .h3,
body.dark-mode .sc-info-card h3,
body.dark-mode .sc-includes-card h3,
body.dark-mode .sc-info-list strong,
body.dark-mode .sc-instructor strong,
body.dark-mode .sc-assessment-card strong {
  color: var(--text-primary)
}

body.dark-mode .sc-hero-copy>p,
body.dark-mode .sc-about p,
body.dark-mode .sc-info-list span,
body.dark-mode .sc-instructor span,
body.dark-mode .sc-assessment-card p {
  color: var(--text-secondary)
}

body.dark-mode .sc-assessment-card,
body.dark-mode .sc-includes-card,
body.dark-mode .sc-info-card,
body.dark-mode .sc-instructor-card,
body.dark-mode .sc-section {
  background: var(--surface-1);
  border-color: rgba(231, 237, 248, .14);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .22)
}

body.dark-mode .sc-audience-item,
body.dark-mode .sc-lesson,
body.dark-mode .sc-module,
body.dark-mode .sc-outcomes li {
  background: var(--surface-3);
  border-color: rgba(231, 237, 248, .1);
  color: var(--text-primary)
}

body.dark-mode .sc-module[open] {
  background: var(--surface-2);
  border-color: rgba(240, 200, 0, .3)
}

body.dark-mode .sc-lesson:hover {
  background: rgba(231, 237, 248, .06)
}

body.dark-mode .sc-lesson-title,
body.dark-mode .sc-module-head,
body.dark-mode .sc-module-title,
body.dark-mode .sc-audience-item,
body.dark-mode .sc-outcomes li {
  color: var(--text-primary)
}

body.dark-mode .sc-lesson-title i,
body.dark-mode .sc-outcomes i,
body.dark-mode .sc-instructor-avatar,
body.dark-mode .sc-hero-media-badge {
  color: var(--brand-accent)
}

body.dark-mode .sc-instructor-avatar {
  background: rgba(143, 229, 182, .12)
}

body.dark-mode .sc-hero-media-badge,
body.dark-mode .sc-hero-media-caption {
  background: var(--surface-1);
  color: var(--brand-accent)
}

body.dark-mode .sc-badge,
body.dark-mode .sc-curriculum-summary,
body.dark-mode .sc-module-count,
body.dark-mode .sc-track {
  background: rgba(143, 229, 182, .12);
  color: #bff7d9
}

body.dark-mode .sc-meta-chip {
  background: var(--surface-1);
  border-color: rgba(231, 237, 248, .14);
  color: var(--text-primary)
}

body.dark-mode .sc-action--primary {
  background: var(--brand-green);
  color: var(--text-inverse)
}

body.dark-mode .sc-action--ghost,
body.dark-mode .sc-assessment-card a {
  background: var(--surface-1);
  border-color: rgba(231, 237, 248, .14);
  color: var(--text-primary)
}

body.dark-mode .sc-lesson-meta,
body.dark-mode .sc-enroll-list li {
  color: var(--text-secondary)
}

/* Single course typography: body text & lists normal, headings stay bold */
.single-course-shell p,
.sc-enroll-list li,
.sc-outcomes li,
.sc-audience-item,
.sc-lesson-title,
.sc-lesson-meta,
.sc-info-list span,
.sc-info-list strong,
.sc-instructor span {
  font-weight: 400
}

/* ==========================================================================
   Lesson viewer page
   ========================================================================== */
.lesson-page {
  background: #f6f2e8
}

.lesson-shell {
  min-height: 100vh;
  background: radial-gradient(62% 48% at 12% -2%, rgba(175, 128, 51, .16), transparent 60%), radial-gradient(58% 50% at 90% 2%, rgba(10, 75, 60, .13), transparent 58%), radial-gradient(80% 72% at 50% 118%, rgba(10, 75, 60, .08), transparent 62%), linear-gradient(160deg, #fcf9f3 0%, #f5f0e6 55%, #eef3f0 100%);
  background-attachment: fixed;
  color: #17211e;
  font-family: thmanyahsans, sans-serif
}

.lesson-hero {
  padding: 40px 0 56px
}

.lesson-hero .library-hero-grid {
  margin-top: 22px
}

.lesson-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0a4b3c;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none
}

.lesson-back-link:hover {
  color: #af8033
}

.lesson-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 20px 0 14px;
  color: #66716c;
  font-size: 13px;
  font-weight: 700
}

.lesson-breadcrumb a {
  color: #0a4b3c;
  text-decoration: none
}

.lesson-breadcrumb a:hover {
  color: #af8033
}

.lesson-breadcrumb i {
  color: #b3bcb7;
  font-size: 11px
}

.lesson-kind {
  display: inline-flex;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(175, 128, 51, .14);
  color: #8c6424;
  font-size: 12px;
  font-weight: 900
}

.lesson-hero-head .h1,
.lesson-hero-head h1 {
  margin: 12px 0 16px;
  color: #0a4b3c;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  font-weight: 900;
  line-height: 1.2
}

.lesson-body {
  padding: 32px 0 72px
}

.lesson-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start
}

.lesson-main {
  display: grid;
  gap: 18px;
  min-width: 0
}

.lesson-media {
  display: flex;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px
}

.lesson-media .video-player-frame {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 42px rgba(10, 75, 60, .16)
}

.lesson-media .audio-player-card,
.lesson-media .preview-share-card,
.lesson-media .lesson-quiz-visual {
  margin: 0 auto
}

.lesson-media .article-reader-preview {
  width: 100%;
  border: 1px solid rgba(10, 75, 60, .12);
  border-radius: 8px;
  box-shadow: 0 18px 36px rgba(10, 75, 60, .08)
}

.lesson-quiz-visual {
  width: min(520px, 100%);
  padding: 40px 28px;
  border: 1px solid rgba(10, 75, 60, .12);
  border-radius: 8px;
  background: linear-gradient(145deg, #fffaf1, #fff);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center
}

.lesson-quiz-visual>i {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #0a4b3c;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px
}

.lesson-quiz-visual strong {
  color: #0a4b3c;
  font-size: 20px;
  font-weight: 900
}

.lesson-quiz-visual span {
  color: #8c6424;
  font-size: 13px;
  font-weight: 900
}

.lesson-quiz-visual .sc-action {
  margin-top: 8px
}

.lesson-content {
  padding: 28px 30px;
  border: 1px solid rgba(10, 75, 60, .12);
  border-radius: 8px;
  background: hsla(0, 0%, 100%, .96);
  box-shadow: 0 18px 36px rgba(10, 75, 60, .06)
}

.lesson-content .h2,
.lesson-content h2 {
  margin: 0 0 14px;
  color: #0a4b3c;
  font-size: 22px;
  font-weight: 900
}

.lesson-content>p {
  margin: 0;
  color: #4f5c58;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.95
}

.lesson-tip {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px dashed rgba(175, 128, 51, .5);
  border-radius: 8px;
  background: rgba(175, 128, 51, .07)
}

.lesson-tip i {
  margin-top: 3px;
  color: #af8033;
  font-size: 16px
}

.lesson-tip p {
  margin: 0;
  color: #6a5a34;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7
}

.lesson-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px
}

.lesson-nav-btn {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 20px;
  border: 1px solid rgba(10, 75, 60, .14);
  border-radius: 8px;
  background: hsla(0, 0%, 100%, .96);
  color: #0a4b3c;
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease
}

.lesson-nav-btn:hover {
  border-color: #af8033;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(10, 75, 60, .1)
}

.lesson-nav-btn--next {
  text-align: left
}

.lesson-nav-btn--finish {
  border-color: #0a4b3c;
  background: #0a4b3c;
  color: #fff
}

.lesson-nav-btn--finish:hover {
  background: #083f33;
  border-color: #083f33
}

.lesson-nav-btn.is-disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none
}

.lnb-dir {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #af8033;
  font-size: 12px;
  font-weight: 900
}

.lesson-nav-btn--finish .lnb-dir {
  color: #ffe189
}

.lnb-title {
  color: inherit;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.4
}

.lesson-sidebar {
  position: sticky;
  top: 96px
}

.lesson-cc-card {
  border: 1px solid rgba(10, 75, 60, .12);
  border-radius: 8px;
  background: hsla(0, 0%, 100%, .96);
  box-shadow: 0 18px 36px rgba(10, 75, 60, .06);
  overflow: hidden
}

.lesson-cc-head {
  padding: 20px 20px 18px;
  border-bottom: 1px solid rgba(10, 75, 60, .1);
  background: #fbfaf6
}

.lesson-cc-head>span {
  display: block;
  color: #af8033;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 6px
}

.lesson-cc-head>a {
  display: block;
  color: #0a4b3c;
  font-size: 17px;
  font-weight: 900;
  text-decoration: none;
  line-height: 1.4
}

.lesson-cc-head>a:hover {
  color: #af8033
}

.lesson-cc-progress {
  margin-top: 14px
}

.lesson-cc-progress-track {
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(10, 75, 60, .1)
}

.lesson-cc-progress-track span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress);
  border-radius: inherit;
  background: linear-gradient(90deg, #af8033, #0a4b3c)
}

.lesson-cc-progress small {
  display: block;
  margin-top: 8px;
  color: #66716c;
  font-size: 12px;
  font-weight: 800
}

.lesson-cc-body {
  max-height: 60vh;
  overflow-y: auto;
  padding: 12px
}

.lesson-cc-module+.lesson-cc-module {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(10, 75, 60, .08)
}

.lesson-cc-module-title {
  padding: 6px 8px;
  color: #17211e;
  font-size: 13px;
  font-weight: 900
}

.lesson-cc-lesson {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #33413c;
  text-decoration: none;
  transition: background .16s ease
}

.lesson-cc-lesson:hover {
  background: #f2efe6
}

.lesson-cc-lesson-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 400
}

.lesson-cc-lesson-title i {
  color: #0a4b3c;
  font-size: 13px
}

.lesson-cc-lesson-meta {
  color: #8b948f;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap
}

.lesson-cc-lesson.is-active {
  background: #0a4b3c
}

.lesson-cc-lesson.is-active .lesson-cc-lesson-title,
.lesson-cc-lesson.is-active .lesson-cc-lesson-title i,
.lesson-cc-lesson.is-active .lesson-cc-lesson-meta {
  color: #fff
}

.lesson-cc-lesson.is-active .lesson-cc-lesson-title {
  font-weight: 900
}

@media(max-width:992px) {
  .lesson-layout {
    grid-template-columns: 1fr
  }

  .lesson-sidebar {
    position: static
  }

  .lesson-cc-body {
    max-height: none
  }
}

@media(max-width:576px) {

  .lesson-body,
  .lesson-hero {
    padding: 28px 0
  }

  .lesson-content {
    padding: 20px
  }

  .lesson-nav {
    grid-template-columns: 1fr
  }
}

/* Lesson viewer - dark mode */
body.dark-mode .lesson-shell {
  background: radial-gradient(circle at 16% 10%, rgba(47, 156, 99, .12), transparent 26%), radial-gradient(circle at 84% 18%, rgba(240, 200, 0, .08), transparent 24%), linear-gradient(180deg, #101722, #11161f 52%, #0c121b);
  color: var(--text-primary)
}

body.dark-mode .lesson-hero {
  border-color: rgba(231, 237, 248, .12)
}

body.dark-mode .lesson-back-link,
body.dark-mode .lesson-breadcrumb a,
body.dark-mode .lesson-cc-head>span {
  color: #ffe189
}

body.dark-mode .lesson-hero-head .h1,
body.dark-mode .lesson-hero-head h1,
body.dark-mode .lesson-content .h2,
body.dark-mode .lesson-content h2,
body.dark-mode .lesson-cc-head>a,
body.dark-mode .lnb-title,
body.dark-mode .lesson-quiz-visual strong {
  color: var(--text-primary)
}

body.dark-mode .lesson-content>p,
body.dark-mode .lesson-breadcrumb,
body.dark-mode .lesson-cc-progress small {
  color: var(--text-secondary)
}

body.dark-mode .lesson-content,
body.dark-mode .lesson-nav-btn,
body.dark-mode .lesson-cc-card,
body.dark-mode .lesson-quiz-visual,
body.dark-mode .lesson-media .article-reader-preview {
  background: var(--surface-1);
  border-color: rgba(231, 237, 248, .14);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .22)
}

body.dark-mode .lesson-cc-head {
  background: var(--surface-3);
  border-color: rgba(231, 237, 248, .1)
}

body.dark-mode .lesson-cc-lesson {
  color: var(--text-primary)
}

body.dark-mode .lesson-cc-lesson:hover {
  background: rgba(231, 237, 248, .06)
}

body.dark-mode .lesson-cc-lesson-title i {
  color: var(--brand-accent)
}

body.dark-mode .lesson-cc-lesson.is-active {
  background: var(--brand-green)
}

body.dark-mode .lesson-cc-module-title {
  color: var(--text-primary)
}

body.dark-mode .lesson-kind {
  background: rgba(143, 229, 182, .12);
  color: #bff7d9
}

body.dark-mode .lesson-tip {
  background: rgba(240, 200, 0, .08);
  border-color: rgba(240, 200, 0, .3)
}

body.dark-mode .lesson-tip p {
  color: #f0d98a
}

body.dark-mode .lesson-nav-btn--finish {
  background: var(--brand-green);
  border-color: var(--brand-green);
  color: var(--text-inverse)
}

/* Soft glass surfaces (light mode) for courses / course / lesson pages */
.courses-shell .assessment-card,
.courses-shell .courses-dashboard-card,
.courses-shell .learning-path-card,
.courses-shell .training-course-card,
.courses-shell .courses-progress-card,
.single-course-shell .sc-section,
.single-course-shell .sc-includes-card,
.single-course-shell .sc-info-card,
.single-course-shell .sc-instructor-card,
.single-course-shell .sc-assessment-card,
.lesson-shell .lesson-content,
.lesson-shell .lesson-nav-btn,
.lesson-shell .lesson-cc-card {
  background: hsla(0, 0%, 100%, .68);
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08)
}

.lesson-shell .lesson-cc-head {
  background: hsla(40, 30%, 97%, .55)
}

p{
  font-weight: 400 !important;
}

/* ===== Quiz / Assessment page ===== */
.quiz-page {
  background: #f6f2e8
}

.quiz-shell {
  min-height: 100vh;
  background: radial-gradient(62% 48% at 12% -2%, rgba(175, 128, 51, .16), transparent 60%), radial-gradient(58% 50% at 90% 2%, rgba(10, 75, 60, .13), transparent 58%), radial-gradient(80% 72% at 50% 118%, rgba(10, 75, 60, .08), transparent 62%), linear-gradient(160deg, #fcf9f3 0%, #f5f0e6 55%, #eef3f0 100%);
  background-attachment: fixed;
  color: #17211e;
  font-family: thmanyahsans, sans-serif
}

.quiz-hero {
  padding: 40px 0 48px
}

.quiz-body {
  padding: 34px 0 88px
}

.quiz-panel {
  max-width: 860px;
  margin: 0 auto;
  padding: 32px;
  border: 1px solid rgba(10, 75, 60, .12);
  border-radius: 18px;
  background: hsla(0, 0%, 100%, .68);
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
  box-shadow: 0 20px 48px rgba(10, 75, 60, .1)
}

@media(max-width:576px) {
  .quiz-panel {
    padding: 22px
  }
}

/* Intro */
.quiz-intro h2 {
  margin: 0 0 10px;
  color: #0a4b3c;
  font-size: 24px;
  font-weight: 900
}

.quiz-intro-lead {
  margin: 0 0 22px;
  color: #55625d;
  font-size: 16px;
  line-height: 1.9
}

.quiz-meta-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none
}

@media(max-width:576px) {
  .quiz-meta-list {
    grid-template-columns: 1fr
  }
}

.quiz-meta-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(10, 75, 60, .1);
  border-radius: 14px;
  background: hsla(40, 30%, 97%, .6)
}

.quiz-meta-list li i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(10, 75, 60, .1);
  color: #0a4b3c;
  font-size: 18px
}

.quiz-meta-list li div {
  display: flex;
  flex-direction: column
}

.quiz-meta-list li strong {
  color: #17211e;
  font-size: 16px
}

.quiz-meta-list li span {
  color: #6b7671;
  font-size: 13px
}

.quiz-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 26px;
  padding: 14px 16px;
  border: 1px dashed rgba(175, 128, 51, .5);
  border-radius: 12px;
  background: rgba(175, 128, 51, .08)
}

.quiz-note i {
  margin-top: 3px;
  color: #af8033
}

.quiz-note p {
  margin: 0;
  color: #6a5a34;
  font-size: 14px;
  line-height: 1.7
}

/* Buttons */
.quiz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 30px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease
}

.quiz-btn--primary {
  background: #0a4b3c;
  color: #fff;
  box-shadow: 0 14px 28px rgba(10, 75, 60, .22)
}

.quiz-btn--primary:hover {
  transform: translateY(-2px);
  background: #0c5949;
  color: #fff
}

.quiz-btn--ghost {
  background: transparent;
  border-color: rgba(10, 75, 60, .28);
  color: #0a4b3c
}

.quiz-btn--ghost:hover {
  background: rgba(10, 75, 60, .07);
  color: #0a4b3c
}

.quiz-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none
}

/* Runner */
.quiz-runner-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 26px
}

.quiz-progress {
  flex: 1
}

.quiz-progress-label {
  display: block;
  margin-bottom: 8px;
  color: #55625d;
  font-size: 14px;
  font-weight: 700
}

.quiz-progress-label b {
  color: #0a4b3c;
  font-weight: 900
}

.quiz-progress-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(10, 75, 60, .12);
  overflow: hidden
}

.quiz-progress-track span {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0a4b3c, #2f9c63);
  transition: width .3s ease
}

.quiz-timer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 30px;
  background: rgba(10, 75, 60, .1);
  color: #0a4b3c;
  font-size: 16px;
  font-weight: 900;
  font-variant-numeric: tabular-nums
}

.quiz-timer.is-low {
  background: rgba(198, 40, 40, .12);
  color: #c62828;
  animation: quizPulse 1s ease-in-out infinite
}

@keyframes quizPulse {
  50% {
    opacity: .55
  }
}

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

.quiz-q-text {
  margin: 0 0 20px;
  color: #17211e;
  font-size: 20px;
  font-weight: 900 !important;
  line-height: 1.6
}

.quiz-options {
  display: grid;
  gap: 12px;
  margin-bottom: 28px
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1.5px solid rgba(10, 75, 60, .16);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .1s ease
}

.quiz-option:hover {
  border-color: rgba(10, 75, 60, .4);
  transform: translateY(-1px)
}

.quiz-option span {
  color: #2f3a36;
  font-size: 15.5px;
  font-weight: 500
}

.quiz-option input {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 2px solid rgba(10, 75, 60, .35);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: border-color .15s ease
}

.quiz-option input:checked {
  border-color: #0a4b3c
}

.quiz-option input:checked::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #0a4b3c
}

.quiz-option:has(input:checked) {
  border-color: #0a4b3c;
  background: rgba(10, 75, 60, .06)
}

.quiz-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between
}

.quiz-nav .quiz-btn--primary {
  margin-inline-start: auto
}

/* Result */
.quiz-result-head {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 26px
}

@media(max-width:640px) {
  .quiz-result-head {
    flex-direction: column;
    text-align: center
  }
}

.quiz-score-ring {
  flex-shrink: 0;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--ring-color, #2f9c63) calc(var(--score, 0) * 1%), rgba(10, 75, 60, .12) 0);
  --ring-color: #2f9c63
}

.quiz-score-ring.is-pass {
  --ring-color: #2f9c63
}

.quiz-score-ring.is-mid {
  --ring-color: #af8033
}

.quiz-score-ring.is-fail {
  --ring-color: #c62828
}

.quiz-score-ring-inner {
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow: inset 0 2px 8px rgba(10, 75, 60, .08)
}

.quiz-score-ring-inner strong {
  color: #0a4b3c;
  font-size: 32px;
  line-height: 1
}

.quiz-score-ring-inner span {
  color: #6b7671;
  font-size: 13px;
  margin-top: 4px
}

.quiz-result-summary {
  flex: 1
}

.quiz-result-badge {
  display: inline-flex;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(175, 128, 51, .14);
  color: #8c6424;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 10px
}

.quiz-result-summary h2 {
  margin: 0 0 8px;
  color: #0a4b3c;
  font-size: 24px;
  font-weight: 900
}

.quiz-result-summary>p {
  margin: 0 0 16px;
  color: #55625d;
  font-size: 15.5px;
  line-height: 1.85
}

.quiz-result-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

@media(max-width:640px) {
  .quiz-result-stats {
    justify-content: center
  }
}

.quiz-result-stats div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 30px;
  background: hsla(40, 30%, 97%, .8);
  border: 1px solid rgba(10, 75, 60, .1);
  color: #2f3a36;
  font-size: 14px
}

.quiz-result-stats b {
  color: #0a4b3c;
  font-weight: 900
}

.quiz-result-stats div:nth-child(1) i {
  color: #2f9c63
}

.quiz-result-stats div:nth-child(2) i {
  color: #c62828
}

.quiz-result-stats div:nth-child(3) i {
  color: #af8033
}

/* Review */
.quiz-review {
  display: grid;
  gap: 12px;
  margin: 8px 0 26px
}

.quiz-review-item {
  padding: 16px 18px;
  border: 1px solid rgba(10, 75, 60, .12);
  border-radius: 14px;
  background: #fff;
  border-inline-start: 4px solid #c62828
}

.quiz-review-item.is-right {
  border-inline-start-color: #2f9c63
}

.quiz-review-top {
  display: flex;
  align-items: flex-start;
  gap: 12px
}

.quiz-review-top p {
  flex: 1;
  margin: 0;
  color: #17211e;
  font-size: 15px;
  font-weight: 700 !important;
  line-height: 1.6
}

.quiz-review-num {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(10, 75, 60, .1);
  color: #0a4b3c;
  font-size: 13px;
  font-weight: 900
}

.quiz-review-top>i {
  font-size: 20px;
  margin-top: 2px
}

.quiz-review-item.is-right .quiz-review-top>i {
  color: #2f9c63
}

.quiz-review-item.is-wrong .quiz-review-top>i {
  color: #c62828
}

.quiz-review-answers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 10px;
  padding-inline-start: 40px
}

.quiz-review-your {
  color: #6b7671;
  font-size: 13.5px
}

.quiz-review-correct {
  color: #2f9c63;
  font-size: 13.5px;
  font-weight: 700
}

.quiz-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px
}

/* Quiz - dark mode */
body.dark-mode .quiz-shell {
  background: radial-gradient(circle at 16% 10%, rgba(47, 156, 99, .12), transparent 26%), radial-gradient(circle at 84% 18%, rgba(240, 200, 0, .08), transparent 24%), linear-gradient(180deg, #101722, #11161f 52%, #0c121b);
  color: var(--text-primary)
}

body.dark-mode .quiz-panel {
  background: var(--surface-1);
  border-color: rgba(231, 237, 248, .14);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .22)
}

body.dark-mode .quiz-intro h2,
body.dark-mode .quiz-q-text,
body.dark-mode .quiz-result-summary h2,
body.dark-mode .quiz-score-ring-inner strong,
body.dark-mode .quiz-progress-label b,
body.dark-mode .quiz-review-top p {
  color: var(--text-primary)
}

body.dark-mode .quiz-intro-lead,
body.dark-mode .quiz-result-summary>p,
body.dark-mode .quiz-progress-label,
body.dark-mode .quiz-review-your {
  color: var(--text-secondary)
}

body.dark-mode .quiz-meta-list li,
body.dark-mode .quiz-option,
body.dark-mode .quiz-result-stats div,
body.dark-mode .quiz-review-item {
  background: var(--surface-2);
  border-color: rgba(231, 237, 248, .14)
}

body.dark-mode .quiz-meta-list li strong,
body.dark-mode .quiz-option span {
  color: var(--text-primary)
}

body.dark-mode .quiz-score-ring-inner {
  background: var(--surface-2)
}

body.dark-mode .quiz-option input {
  border-color: rgba(231, 237, 248, .4)
}

body.dark-mode .quiz-option input:checked {
  border-color: var(--brand-accent)
}

body.dark-mode .quiz-option input:checked::after {
  background: var(--brand-accent)
}

body.dark-mode .quiz-option:has(input:checked) {
  border-color: var(--brand-accent);
  background: rgba(143, 229, 182, .1)
}

body.dark-mode .quiz-btn--primary {
  background: var(--brand-green);
  color: var(--text-inverse)
}

body.dark-mode .quiz-btn--ghost {
  border-color: rgba(231, 237, 248, .28);
  color: var(--text-primary)
}

body.dark-mode .quiz-timer {
  background: rgba(143, 229, 182, .12);
  color: #bff7d9
}

/* ===== Learning path detail page ===== */
.path-page {
  background: #f6f2e8
}

.path-shell {
  min-height: 100vh;
  background: radial-gradient(62% 48% at 12% -2%, rgba(175, 128, 51, .16), transparent 60%), radial-gradient(58% 50% at 90% 2%, rgba(10, 75, 60, .13), transparent 58%), radial-gradient(80% 72% at 50% 118%, rgba(10, 75, 60, .08), transparent 62%), linear-gradient(160deg, #fcf9f3 0%, #f5f0e6 55%, #eef3f0 100%);
  background-attachment: fixed;
  color: #17211e;
  font-family: thmanyahsans, sans-serif
}

.path-hero {
  padding: 40px 0 48px
}

.path-summary strong {
  font-size: 30px
}

.path-body {
  padding: 34px 0 88px
}

.path-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start
}

@media(max-width:992px) {
  .path-layout {
    grid-template-columns: 1fr
  }
}

.path-section {
  margin-bottom: 22px;
  padding: 26px;
  border: 1px solid rgba(10, 75, 60, .12);
  border-radius: 16px;
  background: hsla(0, 0%, 100%, .68);
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
  box-shadow: 0 16px 36px rgba(10, 75, 60, .08)
}

.path-section h2 {
  margin: 0 0 14px;
  color: #0a4b3c;
  font-size: 22px;
  font-weight: 900
}

.path-section>p {
  margin: 0;
  color: #55625d;
  font-size: 16px;
  line-height: 1.9
}

.path-outcomes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px
}

.path-outcomes li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #2f3a36;
  font-size: 15.5px;
  line-height: 1.7
}

.path-outcomes li i {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 50%;
  background: rgba(47, 156, 99, .14);
  color: #2f9c63;
  font-size: 11px
}

.path-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0
}

.path-step {
  position: relative;
  display: flex;
  gap: 18px;
  padding-bottom: 24px
}

.path-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 40px;
  inset-inline-start: 19px;
  width: 2px;
  height: calc(100% - 40px);
  background: rgba(10, 75, 60, .16)
}

.path-step-num {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0a4b3c;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  z-index: 1
}

.path-step h3 {
  margin: 6px 0 6px;
  color: #17211e;
  font-size: 18px;
  font-weight: 900
}

.path-step p {
  margin: 0;
  color: #55625d;
  font-size: 15px;
  line-height: 1.8
}

/* Sidebar */
.path-sidebar {
  display: grid;
  gap: 18px;
  position: sticky;
  top: 90px
}

@media(max-width:992px) {
  .path-sidebar {
    position: static
  }
}

.path-info-card,
.path-audience-card {
  padding: 24px;
  border: 1px solid rgba(10, 75, 60, .12);
  border-radius: 16px;
  background: hsla(0, 0%, 100%, .68);
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
  box-shadow: 0 16px 36px rgba(10, 75, 60, .08)
}

.path-info-card h3,
.path-audience-card h3 {
  margin: 0 0 16px;
  color: #0a4b3c;
  font-size: 17px;
  font-weight: 900
}

.path-info-card ul {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px
}

.path-info-card li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(10, 75, 60, .08);
  color: #6b7671;
  font-size: 14px
}

.path-info-card li:last-child {
  padding-bottom: 0;
  border-bottom: 0
}

.path-info-card li i {
  color: #af8033;
  width: 18px;
  text-align: center
}

.path-info-card li b {
  margin-inline-start: auto;
  color: #17211e;
  font-size: 14.5px;
  font-weight: 800
}

.path-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 30px;
  background: #0a4b3c;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .15s ease, background .2s ease
}

.path-cta:hover {
  transform: translateY(-2px);
  background: #0c5949;
  color: #fff
}

.path-audience-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px
}

.path-audience-card li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #2f3a36;
  font-size: 14.5px;
  line-height: 1.7
}

.path-audience-card li i {
  margin-top: 3px;
  color: #2f9c63;
  font-size: 13px
}

/* Learning path - dark mode */
body.dark-mode .path-shell {
  background: radial-gradient(circle at 16% 10%, rgba(47, 156, 99, .12), transparent 26%), radial-gradient(circle at 84% 18%, rgba(240, 200, 0, .08), transparent 24%), linear-gradient(180deg, #101722, #11161f 52%, #0c121b);
  color: var(--text-primary)
}

body.dark-mode .path-section,
body.dark-mode .path-info-card,
body.dark-mode .path-audience-card {
  background: var(--surface-1);
  border-color: rgba(231, 237, 248, .14);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .22)
}

body.dark-mode .path-section h2,
body.dark-mode .path-step h3,
body.dark-mode .path-info-card h3,
body.dark-mode .path-audience-card h3,
body.dark-mode .path-info-card li b {
  color: var(--text-primary)
}

body.dark-mode .path-section>p,
body.dark-mode .path-step p,
body.dark-mode .path-outcomes li,
body.dark-mode .path-audience-card li,
body.dark-mode .path-info-card li {
  color: var(--text-secondary)
}

body.dark-mode .path-step-num {
  background: var(--brand-green);
  color: var(--text-inverse)
}

body.dark-mode .path-step:not(:last-child)::before {
  background: rgba(231, 237, 248, .16)
}

body.dark-mode .path-cta {
  background: var(--brand-green);
  color: var(--text-inverse)
}

/* ===== Auth pages (login / register) ===== */
.auth-page {
  min-height: 100vh;
  margin: 0;
  background: radial-gradient(58% 50% at 88% 4%, rgba(175, 128, 51, .16), transparent 58%), radial-gradient(60% 55% at 6% 96%, rgba(10, 75, 60, .12), transparent 60%), linear-gradient(160deg, #fcf9f3 0%, #f4efe5 55%, #eef3f0 100%);
  font-family: thmanyahsans, sans-serif;
  color: #17211e
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 20px
}

.auth-card {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  width: 100%;
  max-width: 1040px;
  min-height: 620px;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 40px 90px rgba(10, 75, 60, .16), 0 4px 12px rgba(10, 75, 60, .06)
}

@media(max-width:860px) {
  .auth-card {
    grid-template-columns: 1fr;
    max-width: 480px;
    min-height: 0
  }
}

/* Form side */
.auth-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px
}

@media(max-width:576px) {
  .auth-main {
    padding: 30px 22px
  }
}

.auth-form-wrap {
  width: 100%;
  max-width: 380px
}

.auth-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
  color: #66716c;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: color .15s ease
}

.auth-back:hover {
  color: #0a4b3c
}

.auth-head {
  margin-bottom: 26px
}

.auth-head h1 {
  margin: 0 0 8px;
  color: #0a4b3c;
  font-size: 28px;
  font-weight: 900
}

.auth-head p {
  margin: 0;
  color: #66716c;
  font-size: 15px;
  line-height: 1.7
}

.auth-form {
  display: grid;
  gap: 16px
}

.auth-field {
  display: block
}

.auth-label {
  display: block;
  margin-bottom: 7px;
  color: #2f3a36;
  font-size: 13.5px;
  font-weight: 800
}

.auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center
}

.auth-input-wrap>i {
  position: absolute;
  inset-inline-start: 15px;
  color: #9aa5a0;
  font-size: 15px;
  pointer-events: none
}

.auth-input-wrap input {
  width: 100%;
  min-height: 52px;
  padding: 0 44px;
  border: 1.5px solid rgba(10, 75, 60, .18);
  border-radius: 12px;
  background: #fbfcfb;
  color: #17211e;
  font-family: inherit;
  font-size: 15px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease
}

.auth-input-wrap input::placeholder {
  color: #a9b2ad
}

.auth-input-wrap input:focus {
  outline: none;
  border-color: #0a4b3c;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(10, 75, 60, .1)
}

.auth-eye {
  position: absolute;
  inset-inline-end: 8px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #9aa5a0;
  cursor: pointer;
  transition: color .15s ease, background .15s ease
}

.auth-eye:hover {
  color: #0a4b3c;
  background: rgba(10, 75, 60, .06)
}

.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap
}

.auth-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #55625d;
  font-size: 13.5px;
  cursor: pointer
}

.auth-check input {
  width: 18px;
  height: 18px;
  accent-color: #0a4b3c;
  cursor: pointer
}

.auth-terms {
  align-items: flex-start;
  line-height: 1.6
}

.auth-terms input {
  margin-top: 2px;
  flex-shrink: 0
}

.auth-link {
  color: #0a4b3c;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none
}

.auth-link:hover {
  color: #af8033;
  text-decoration: underline
}

.auth-submit {
  min-height: 52px;
  margin-top: 4px;
  border: 0;
  border-radius: 30px;
  background: #0a4b3c;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
  box-shadow: 0 14px 28px rgba(10, 75, 60, .22)
}

.auth-submit:hover {
  transform: translateY(-2px);
  background: #0c5949
}

.auth-divider {
  position: relative;
  text-align: center;
  margin: 4px 0
}

.auth-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline: 0;
  height: 1px;
  background: rgba(10, 75, 60, .14)
}

.auth-divider span {
  position: relative;
  padding: 0 12px;
  background: #fff;
  color: #939d98;
  font-size: 12.5px
}

.auth-socials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.auth-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  border: 1.5px solid rgba(10, 75, 60, .18);
  border-radius: 30px;
  background: #fff;
  color: #2f3a36;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .1s ease
}

.auth-social:hover {
  border-color: rgba(10, 75, 60, .4);
  background: #fafbfa;
  transform: translateY(-1px)
}

.auth-social .fa-google {
  color: #ea4335
}

.auth-switch {
  margin: 24px 0 0;
  text-align: center;
  color: #66716c;
  font-size: 14px
}

.auth-switch a {
  color: #0a4b3c;
  font-weight: 800;
  text-decoration: none
}

.auth-switch a:hover {
  color: #af8033;
  text-decoration: underline
}

/* Brand side */
.auth-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 44px;
  color: #fff;
  background: radial-gradient(70% 60% at 85% 10%, rgba(175, 128, 51, .34), transparent 60%), linear-gradient(160deg, #0a4b3c 0%, #0c5545 55%, #073b30 100%);
  overflow: hidden
}

.auth-aside::after {
  content: "";
  position: absolute;
  inset-inline-end: -80px;
  bottom: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .12), transparent 70%)
}

@media(max-width:860px) {
  .auth-aside {
    display: none
  }
}

.auth-aside-top,
.auth-aside-body,
.auth-aside-foot {
  position: relative;
  z-index: 1
}

.auth-logo img {
  height: 40px;
  width: auto;
  filter: brightness(0) invert(1)
}

.auth-aside-body h2 {
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.35
}

.auth-aside-body>p {
  margin: 0 0 24px;
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
  line-height: 1.85
}

.auth-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px
}

.auth-points li {
  display: flex;
  align-items: center;
  gap: 11px;
  color: rgba(255, 255, 255, .92);
  font-size: 14.5px
}

.auth-points li i {
  color: #f0c800;
  font-size: 16px
}

.auth-aside-foot {
  color: rgba(255, 255, 255, .55);
  font-size: 12.5px
}

/* Auth - dark mode */
body.dark-mode.auth-page {
  background: radial-gradient(58% 50% at 88% 4%, rgba(240, 200, 0, .08), transparent 58%), radial-gradient(60% 55% at 6% 96%, rgba(47, 156, 99, .1), transparent 60%), linear-gradient(160deg, #0e141d, #11161f 55%, #0b1016);
  color: var(--text-primary)
}

body.dark-mode .auth-card {
  background: var(--surface-1);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .4)
}

body.dark-mode .auth-head h1 {
  color: var(--text-primary)
}

body.dark-mode .auth-head p,
body.dark-mode .auth-back,
body.dark-mode .auth-switch,
body.dark-mode .auth-check {
  color: var(--text-secondary)
}

body.dark-mode .auth-label {
  color: var(--text-primary)
}

body.dark-mode .auth-input-wrap input {
  background: var(--surface-2);
  border-color: rgba(231, 237, 248, .16);
  color: var(--text-primary)
}

body.dark-mode .auth-input-wrap input:focus {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 4px rgba(143, 229, 182, .12)
}

body.dark-mode .auth-divider span,
body.dark-mode .auth-social {
  background: var(--surface-1)
}

body.dark-mode .auth-social {
  border-color: rgba(231, 237, 248, .16);
  color: var(--text-primary)
}

body.dark-mode .auth-submit {
  background: var(--brand-green)
}