@charset "UTF-8";
/*! ------------------------------------------------
 * Project Name: projectkreate – Inclusive Medical Illustrations & Animations
 * Project Description: Inclusive, culturally rich medical illustrations and animations empowering students, educators, and practitioners with equitable, representative visuals.
 * Tags: medical illustration, medical animation, inclusive healthcare, diversity, education, artists, community, repository
 * Version: 1.0.0
 * Build Date: July 2025
 * Last Update: August 2025
 * This product is available exclusively on Themeforest
 * Author: projectkreate
 * Author URI: https://projectkreate */
/*! File name: loader.css
 * ------------------------------------------------
 *
 * ------------------------------------------------
 * Table of Contents
 * ------------------------------------------------
 *  01. Loader Styles
 * ------------------------------------------------
 * Table of Contents End
 * ------------------------------------------------ */
:root {
  --_size: 1.8rem;
  --_font-default: 'Inter', sans-serif;
  --_font-accent: 'Inter', sans-serif;
  --_font-heading: 'Baloo 2', cursive;
  --_radius-s: 10px;
  --_radius-m: 18px;
  --_radius-pt-m: 1.6rem;
  --_radius-l: 26px;
  --_radius-xl: 38px;
  --_radius-pill: 999px;
  --_animspeed-fast: 0.1s;
  --_animspeed-medium: 0.3s;
  --_animspeed-slow: 0.6s;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decel: cubic-bezier(0, 0, 0.2, 1);
  --ease-accel: cubic-bezier(0.4, 0, 1, 1);
  --ease-brand: cubic-bezier(0.23, 0.65, 0.74, 1.09);
  --_animbezier: var(--ease-standard);
  --pk-placeholder-image: none;
  --pk-placeholder-bg: none;
  --brand-orange: #DF5731;
  --brand-orange-rgb: 223, 87, 49;
  --brand-gradient-start: #DF5731;
  --brand-gradient-end: #F2B85A;
  --brand-gradient-start-rgb: 223, 87, 49;
  --brand-gradient-end-rgb: 242, 184, 90;
  /* light color scheme */
  --base--light: #FFF1E6;
  --base-rgb--light: 255, 241, 230;
  --base-tint--light: #FFFFFF;
  --base-shade--light: #EFC2A3;
  --base-opp--light: #2E2019;
  --base-opp-tint--light: #1C1C1C;
  --accent--light: #DF5731;
  --accent-rgb--light: 223, 87, 49;
  --additional--light: #F2B85A;
  --additional-rgb--light: 242, 184, 90;
  --tertiary--light: #915A42;
  --tertiary-rgb--light: 145, 90, 66;
  --neutral-transparent--light: rgba(255, 241, 230, 0.6);
  --st-bright--light: #2E2019;
  --st-medium--light: #915A42;
  --st-muted--light: #EFC2A3;
  --st-opp-bright--light: #FFF1E6;
  --fw-regular--light: 400;
  --fw-medium--light: 500;
  --fw-semibold--light: 600;
  --fw-bold--light: 700;
  --fw-black--light: 900;
  --fw-regular-opp--light: 400;
  --fw-medium-opp--light: 600;
  --t-bright--light: #2E2019;
  --t-medium--light: #915A42;
  --t-muted--light: rgba(46, 32, 25, 0.7);
  --t-muted-extra--light: rgba(46, 32, 25, 0.5);
  --t-opp-bright--light: #FFF1E6;
  --t-opp-medium--light: #EFC2A3;
  --t-opp-muted--light: rgba(255, 241, 230, 0.7);
  --bg-demo-screen-01--light: url(../img/demo/screens/01.webp);
  --bg-demo-screen-02--light: url(../img/demo/screens/02.webp);
  --bg-demo-screen-03--light: url(../img/demo/screens/03.webp);
  --bg-demo-screen-04--light: url(../img/demo/screens/04.webp);
  --bg-demo-screen-05--light: url(../img/demo/screens/05.webp);
  --bg-demo-screen-06--light: url(../img/demo/screens/06.webp);
  --bg-demo-screen-07--light: url(../img/demo/screens/07.webp);
  --bg-demo-screen-08--light: url(../img/demo/screens/08.webp);
  --bg-demo-screen-09--light: url(../img/demo/screens/09.webp);
  /* dark color scheme */
  --base--dark: #0A0A0A;
  --base-rgb--dark: 10, 10, 10;
  --base-tint--dark: #2E2019;
  --base-shade--dark: #1A1A1A;
  --base-opp--dark: #FFF1E6;
  --base-opp-tint--dark: #FFFFFF;
  --accent--dark: #DF5731;
  --accent-rgb--dark: 223, 87, 49;
  --additional--dark: #F2B85A;
  --additional-rgb--dark: 242, 184, 90;
  --tertiary--dark: #915A42;
  --tertiary-rgb--dark: 145, 90, 66;
  --neutral-transparent--dark: rgba(10, 10, 10, 0.6);
  --st-bright--dark: #FFF1E6;
  --st-medium--dark: #EFC2A3;
  --st-muted--dark: #915A42;
  --st-opp-bright--dark: #0A0A0A;
  --fw-regular--dark: 400;
  --fw-medium--dark: 500;
  --fw-semibold--dark: 600;
  --fw-bold--dark: 700;
  --fw-black--dark: 900;
  --fw-regular-opp--dark: 400;
  --fw-medium-opp--dark: 600;
  --t-bright--dark: #FFF1E6;
  --t-medium--dark: #EFC2A3;
  --t-muted--dark: rgba(255, 241, 230, 0.7);
  --t-muted-extra--dark: rgba(255, 241, 230, 0.5);
  --t-opp-bright--dark: #2E2019;
  --t-opp-medium--dark: #915A42;
  --t-opp-muted--dark: rgba(46, 32, 25, 0.7);
  --bg-demo-screen-01--dark: url(../img/demo/screens/01-d.webp);
  --bg-demo-screen-02--dark: url(../img/demo/screens/02-d.webp);
  --bg-demo-screen-03--dark: url(../img/demo/screens/03-d.webp);
  --bg-demo-screen-04--dark: url(../img/demo/screens/04-d.webp);
  --bg-demo-screen-05--dark: url(../img/demo/screens/05-d.webp);
  --bg-demo-screen-06--dark: url(../img/demo/screens/06-d.webp);
  --bg-demo-screen-07--dark: url(../img/demo/screens/07-d.webp);
  --bg-demo-screen-08--dark: url(../img/demo/screens/08-d.webp);
  --bg-demo-screen-09--dark: url(../img/demo/screens/09-d.webp);
  /* permanent colors */
  --pt-base: #FFFFFF;
  --pt-base-dark: #161616;
  --pt-t-light-bright: #FFFFFF;
  --pt-t-dark-bright: #161616;
  --pt-st-light-bright: #FFFFFF;
  --pt-st-dark-bright: #161616;
  --pt-purple-rgb: 159, 139, 231;
  --pt-purple-dark-rgb: 33, 10, 113;
  /* neutral colors */
  --nl-white: #ffffff;
  --nl-black: #000000;
}
@media only screen and (min-width: 768px) {
  :root {
    --_radius-m: 2.6rem;
    --_radius-l: 5rem;
    --_radius-xl: 8rem;
  }
}
@media only screen and (min-width: 1200px) {
  :root {
    --_radius-xl: 8rem;
  }
}

/* defaults */
@media (prefers-color-scheme: light) {
  :root {
    --base: var(--base--light);
    --base-rgb: var(--base-rgb--light);
    --base-tint: var(--base-tint--light);
    --base-shade: var(--base-shade--light);
    --base-opp: var(--base-opp--light);
    --base-opp-tint: var(--base-opp-tint--light);
    --accent: var(--accent--light);
    --accent-rgb: var(--accent-rgb--light);
    --additional: var(--additional--light);
    --additional-rgb: var(--additional-rgb--light);
    --neutral-transparent: var(--neutral-transparent--light);
    --st-bright: var(--st-bright--light);
    --st-medium: var(--st-medium--light);
    --st-muted: var(--st-muted--light);
    --st-opp-bright: var(--st-opp-bright--light);
    --fw-regular: var(--fw-regular--light);
    --fw-medium: var(--fw-medium--light);
    --fw-semibold: var(--fw-semibold--light);
    --fw-bold: var(--fw-bold--light);
    --fw-black: var(--fw-black--light);
    --fw-regular-opp: var(--fw-regular-opp--light);
    --fw-medium-opp: var(--fw-medium-opp--light);
    --t-bright: var(--t-bright--light);
    --t-medium: var(--t-medium--light);
    --t-muted: var(--t-muted--light);
    --t-muted-extra: var(--t-muted-extra--light);
    --t-opp-bright: var(--t-opp-bright--light);
    --t-opp-medium: var(--t-opp-medium--light);
    --t-opp-muted: var(--t-opp-muted--light);
    --bg-demo-screen-01: var(--bg-demo-screen-01--light);
    --bg-demo-screen-02: var(--bg-demo-screen-02--light);
    --bg-demo-screen-03: var(--bg-demo-screen-03--light);
    --bg-demo-screen-04: var(--bg-demo-screen-04--light);
    --bg-demo-screen-05: var(--bg-demo-screen-05--light);
    --bg-demo-screen-06: var(--bg-demo-screen-06--light);
    --bg-demo-screen-07: var(--bg-demo-screen-07--light);
    --bg-demo-screen-08: var(--bg-demo-screen-08--light);
    --bg-demo-screen-09: var(--bg-demo-screen-09--light);
  }
}
[color-scheme=light] {
  --base: var(--base--light);
  --base-rgb: var(--base-rgb--light);
  --base-tint: var(--base-tint--light);
  --base-shade: var(--base-shade--light);
  --base-opp: var(--base-opp--light);
  --base-opp-tint: var(--base-opp-tint--light);
  --accent: var(--accent--light);
  --accent-rgb: var(--accent-rgb--light);
  --additional: var(--additional--light);
  --additional-rgb: var(--additional-rgb--light);
  --neutral-transparent: var(--neutral-transparent--light);
  --st-bright: var(--st-bright--light);
  --st-medium: var(--st-medium--light);
  --st-muted: var(--st-muted--light);
  --st-opp-bright: var(--st-opp-bright--light);
  --fw-regular: var(--fw-regular--light);
  --fw-medium: var(--fw-medium--light);
  --fw-semibold: var(--fw-semibold--light);
  --fw-bold: var(--fw-bold--light);
  --fw-regular-opp: var(--fw-regular-opp--light);
  --fw-medium-opp: var(--fw-medium-opp--light);
  --t-bright: var(--t-bright--light);
  --t-medium: var(--t-medium--light);
  --t-muted: var(--t-muted--light);
  --t-muted-extra: var(--t-muted-extra--light);
  --t-opp-bright: var(--t-opp-bright--light);
  --t-opp-medium: var(--t-opp-medium--light);
  --t-opp-muted: var(--t-opp-muted--light);
  --bg-demo-screen-01: var(--bg-demo-screen-01--light);
  --bg-demo-screen-02: var(--bg-demo-screen-02--light);
  --bg-demo-screen-03: var(--bg-demo-screen-03--light);
  --bg-demo-screen-04: var(--bg-demo-screen-04--light);
  --bg-demo-screen-05: var(--bg-demo-screen-05--light);
  --bg-demo-screen-06: var(--bg-demo-screen-06--light);
  --bg-demo-screen-07: var(--bg-demo-screen-07--light);
  --bg-demo-screen-08: var(--bg-demo-screen-08--light);
  --bg-demo-screen-09: var(--bg-demo-screen-09--light);
}

[color-scheme=dark] {
  --base: var(--base--dark);
  --base-rgb: var(--base-rgb--dark);
  --base-tint: var(--base-tint--dark);
  --base-shade: var(--base-shade--dark);
  --base-opp: var(--base-opp--dark);
  --base-opp-tint: var(--base-opp-tint--dark);
  --accent: var(--accent--dark);
  --accent-rgb: var(--accent-rgb--dark);
  --additional: var(--additional--dark);
  --additional-rgb: var(--additional-rgb--dark);
  --neutral-transparent: var(--neutral-transparent--dark);
  --st-bright: var(--st-bright--dark);
  --st-medium: var(--st-medium--dark);
  --st-muted: var(--st-muted--dark);
  --st-opp-bright: var(--st-opp-bright--dark);
  --fw-regular: var(--fw-regular--dark);
  --fw-medium: var(--fw-medium--dark);
  --fw-semibold: var(--fw-semibold--dark);
  --fw-bold: var(--fw-bold--dark);
  --fw-regular-opp: var(--fw-regular-opp--dark);
  --fw-medium-opp: var(--fw-medium-opp--dark);
  --t-bright: var(--t-bright--dark);
  --t-medium: var(--t-medium--dark);
  --t-muted: var(--t-muted--dark);
  --t-muted-extra: var(--t-muted-extra--dark);
  --t-opp-bright: var(--t-opp-bright--dark);
  --t-opp-medium: var(--t-opp-medium--dark);
  --t-opp-muted: var(--t-opp-muted--dark);
  --bg-demo-screen-01: var(--bg-demo-screen-01--dark);
  --bg-demo-screen-02: var(--bg-demo-screen-02--dark);
  --bg-demo-screen-03: var(--bg-demo-screen-03--dark);
  --bg-demo-screen-04: var(--bg-demo-screen-04--dark);
  --bg-demo-screen-05: var(--bg-demo-screen-05--dark);
  --bg-demo-screen-06: var(--bg-demo-screen-06--dark);
  --bg-demo-screen-07: var(--bg-demo-screen-07--dark);
  --bg-demo-screen-08: var(--bg-demo-screen-08--dark);
  --bg-demo-screen-09: var(--bg-demo-screen-09--dark);
}

/* ------------------------------------------------*/
/* Loader Styles Start */
/* ------------------------------------------------*/
.loader {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.loader.loader--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.loader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .loader {
    transition: none;
  }
}
.loader__wrapper {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--base);
  color: var(--t-bright);
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader__content {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  transform: translateX(-50%) translateY(-50%);
  display: flex;
  justify-content: center;
  width: 100%;
  z-index: 2;
  color: var(--t-bright);
  overflow: hidden;
}

.loader__count {
  display: flex;
  justify-content: end;
  overflow: hidden;
  line-height: 1;
}
.loader__count span {
  display: inline-flex;
  font: normal var(--fw-medium) 6rem/0.9 var(--_font-accent);
  letter-spacing: -0.06rem;
  color: var(--t-bright);
}
@media only screen and (min-width: 768px) {
  .loader__count span {
    font-size: 8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .loader__count span {
    font-size: 10rem;
  }
}
@media only screen and (min-width: 1600px) {
  .loader__count span {
    font-size: 12rem;
  }
}

/* ------------------------------------------------*/
/* Loader Styles End */
/* ------------------------------------------------*/