/* Generated by theme/build-css.mjs from theme/canvas.css (Canvas by SemiColonWeb, Bootstrap MIT) and theme/site.css. Do not edit. */
@charset "UTF-8";
/*-----------------------------------------------------------------------------------

    Theme Name: Canvas
    Theme URI: http://themes.semicolonweb.com/html/canvas
    Description: The Multi-Purpose Template
    Author: SemiColonWeb
    Author URI: http://themeforest.net/user/semicolonweb
    Version: 8.0.6

    SASS Stylesheet

-----------------------------------------------------------------------------------*/
/*!
 * Bootstrap  v5.3.8 (https://getbootstrap.com/)
 * Copyright 2011-2026 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
:root {
  --bs-gray-900: #212529;
  --bs-font-sans-serif: 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-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-bg: #fff;
  --bs-secondary-color: rgba(33, 37, 41, 0.75);
  --bs-secondary-bg: #e9ecef;
  --bs-tertiary-bg: #f8f9fa;
  --bs-heading-color: inherit;
  --bs-link-color-rgb: 13, 110, 253;
  --bs-link-hover-color-rgb: 10, 88, 202;
  --bs-code-color: #d63384;
  --bs-border-width: 1px;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
}

*,
*::before,
*::after {
  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);
}

 h3, .h3, h2, .h2, h1, .h1 {
  margin-top: 0;
  margin-bottom: 0.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 + 0.9vw);
}
@media (min-width: 1200px) {
  h2, .h2 {
    font-size: 2rem;
  }
}

h3, .h3 {
  font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
  h3, .h3 {
    font-size: 1.75rem;
  }
}

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;
}


strong {
  font-weight: bolder;
}

small, .small {
  font-size: 0.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: 0.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;
}

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

button {
  text-transform: none;
}

[role=button] {
  cursor: pointer;
}

[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
  display: none !important;
}

button,
[type=button],
[type=submit] {
  -webkit-appearance: button;
}
button:not(:disabled),
[type=button]:not(:disabled),
[type=submit]:not(:disabled) {
  cursor: pointer;
}

::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
  padding: 0;
}

::-webkit-inner-spin-button {
  height: auto;
}

/* rtl:raw:
[type="tel"],
[type="url"],
[type="email"],
[type="number"] {
  direction: ltr;
}
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-color-swatch-wrapper {
  padding: 0;
}

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

[hidden] {
  display: none !important;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
}

.display-3 {
  font-weight: 300;
  line-height: 1.2;
  font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
  .display-3 {
    font-size: 4rem;
  }
}

.container {
  --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: 576px) {
   .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
   .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
   .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
   .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
   .container {
    max-width: 1320px;
  }
}
:root {
}

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

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

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

.g-4 {
  --bs-gutter-y: 1.5rem;
}
@media (min-width: 768px) {
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
}
@media (min-width: 992px) {
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
}

.form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--bs-body-bg);
  background-clip: padding-box;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-control {
    transition: none;
  }
}
.form-control:focus {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: rgb(134, 182.5, 254);
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.form-control::-webkit-date-and-time-value {
  min-width: 85px;
  height: 1.5em;
  margin: 0;
}
.form-control::-webkit-datetime-edit {
  display: block;
  padding: 0;
}
.form-control::-moz-placeholder {
  color: var(--bs-secondary-color);
  opacity: 1;
}
.form-control::placeholder {
  color: var(--bs-secondary-color);
  opacity: 1;
}
.form-control:disabled {
  background-color: var(--bs-secondary-bg);
  opacity: 1;
}
.form-control::file-selector-button {
  padding: 0.375rem 0.75rem;
  margin: -0.375rem -0.75rem;
  margin-inline-end: 0.75rem;
  color: var(--bs-body-color);
  background-color: var(--bs-tertiary-bg);
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: var(--bs-border-width);
  border-radius: 0;
  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;
}
@media (prefers-reduced-motion: reduce) {
  .form-control::file-selector-button {
    transition: none;
  }
}
.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: var(--bs-secondary-bg);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.card {
  --bs-card-border-width: var(--bs-border-width);
  --bs-card-border-color: var(--bs-border-color-translucent);
  --bs-card-border-radius: var(--bs-border-radius);
  --bs-card-height: ;
  --bs-card-bg: var(--bs-body-bg);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: var(--bs-card-height);
  color: var(--bs-body-color);
  word-wrap: break-word;
  background-color: var(--bs-card-bg);
  background-clip: border-box;
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: var(--bs-card-border-radius);
}

.alert {
  --bs-alert-bg: transparent;
  --bs-alert-padding-x: 1rem;
  --bs-alert-padding-y: 1rem;
  --bs-alert-margin-bottom: 1rem;
  --bs-alert-color: inherit;
  --bs-alert-border-color: transparent;
  --bs-alert-border: var(--bs-border-width) solid var(--bs-alert-border-color);
  --bs-alert-border-radius: var(--bs-border-radius);
  position: relative;
  padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
  margin-bottom: var(--bs-alert-margin-bottom);
  color: var(--bs-alert-color);
  background-color: var(--bs-alert-bg);
  border: var(--bs-alert-border);
  border-radius: var(--bs-alert-border-radius);
}

:root {
}

/* rtl:begin:ignore */

/* rtl:end:ignore */

/* rtl:begin:ignore */

/* rtl:end:ignore */

/* rtl:begin:ignore */

/* rtl:end:ignore */

/* rtl:begin:ignore */

/* rtl:end:ignore */

:root {
}

.placeholder {
  display: inline-block;
  min-height: 1em;
  vertical-align: middle;
  cursor: wait;
  background-color: currentcolor;
  opacity: 0.5;
}

.visually-hidden {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.visually-hidden:not(caption) {
  position: absolute !important;
}
.visually-hidden * {
  overflow: hidden !important;
}

.d-flex {
  display: flex !important;
}

.d-none {
  display: none !important;
}

.h-100 {
  height: 100% !important;
}

.flex-column {
  flex-direction: column !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;
}

.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}

.me-2 {
  margin-right: 0.5rem !important;
}

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

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

.mb-3 {
  margin-bottom: 1rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

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

.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

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

.gap-4 {
  gap: 1.5rem !important;
}

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

.text-decoration-none {
  text-decoration: none !important;
}

/* rtl:begin:remove */

/* rtl:end:remove */
@media (min-width: 768px) {
  .d-md-inline {
    display: inline !important;
  }
  .flex-md-row {
    flex-direction: row !important;
  }
  .gap-md-4 {
    gap: 1.5rem !important;
  }
}
@media (min-width: 992px) {
  .mt-lg-0 {
    margin-top: 0 !important;
  }
}
:root {
  --cnvs-themecolor:	#1abc9c;
  --cnvs-themecolor-rgb:	26, 188, 156;
  --bs-link-color-rgb:	var(--cnvs-themecolor-rgb);
  --cnvs-headings-font-weight:	600;
  /* Font Families */
  --cnvs-body-font:	"Inter", sans-serif;
  --cnvs-primary-font:	"Inter", sans-serif;
  --cnvs-line-height-base:	1.5;
  /* Margins */
  --cnvs-section-margin:	4rem;
  --cnvs-section-padding:	var(--cnvs-section-margin);
  /* Header Height */
  /* Social Colors */
  --cnvs-font-size-body:	var(--bs-body-font-size);
  --cnvs-font-size-h1:	2.25rem;
  --cnvs-font-size-h2:	1.875rem;
  --cnvs-font-size-h3:	1.625rem;
  --cnvs-font-size-small:	calc(var(--cnvs-font-size-body) * 0.875);
}

:root {
  --cnvs-contrast-800: #343a40;
  --cnvs-contrast-900: #212529;
  --cnvs-body-bg:	var(--bs-body-bg);
  --cnvs-body-bg-boxed:	var(--cnvs-body-bg);
  --cnvs-link-color:	var(--cnvs-themecolor);
  --cnvs-link-hover-color:	var(--cnvs---cnvs-heading-color);
  --cnvs-contrast-rgb:	0, 0, 0;
  --cnvs-contrast-bg-offset:	#f8f9fa;
  --cnvs-section-bg:	var(--cnvs-contrast-bg-offset);
  --cnvs-heading-color:	var(--cnvs-contrast-900);
  --cnvs-footer-bg:	var(--cnvs-contrast-bg-offset);
  color: var(--cnvs-contrast-800);
}

/* ----------------------------------------------------------------

	Layouts.scss

-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Bootstrap Adjustments
-----------------------------------------------------------------*/
@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: auto;
  }
}
[class*=col-]:not([class*=sticky-]):not([class*=position-]) {
  position: relative;
}

/*	Custom Bootstap Columns */
#wrapper {
  position: relative;
  float: none;
  width: 100%;
  margin: 0 auto;
  background-color: var(--cnvs-body-bg);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
@media (min-width: 1200px) {
  body:not(.stretched) #wrapper {
    max-width: 1200px;
  }
}
@media (min-width: 1400px) {
  body:not(.stretched) #wrapper {
    max-width: 1400px;
  }
}
.stretched #wrapper {
  width: 100%;
  margin: 0;
  box-shadow: none;
}

/* ----------------------------------------------------------------
	Sections
-----------------------------------------------------------------*/
.section {
  position: relative;
  width: 100%;
  margin: var(--cnvs-section-margin) 0;
  padding: var(--cnvs-section-padding) 0;
  background-color: var(--cnvs-section-bg);
  overflow: hidden;
}
.section .container {
  z-index: 2;
}

/* ----------------------------------------------------------------
	Columns & Grids
-----------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------
	typography.scss
-----------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Basic
-----------------------------------------------------------------*/
 ul, li {
  margin: 0;
  padding: 0;
}

::-moz-selection {
  background: var(--cnvs-themecolor);
  color: var(--cnvs-body-bg);
  text-shadow: none;
}

::selection {
  background: var(--cnvs-themecolor);
  color: var(--cnvs-body-bg);
  text-shadow: none;
}

::-moz-selection {
  background: var(--cnvs-themecolor);
  color: var(--cnvs-body-bg);
  text-shadow: none;
}

::-webkit-selection {
  background: var(--cnvs-themecolor);
  color: var(--cnvs-body-bg);
  text-shadow: none;
}

/* ----------------------------------------------------------------
	Typography
-----------------------------------------------------------------*/
body {
  line-height: 1.5;
  font-size: var(--cnvs-font-size-body);
  font-family: var(--cnvs-body-font);
  background: var(--cnvs-body-bg);
}
body:not(.stretched) {
  background: var(--cnvs-body-bg-boxed);
}

a:not(.btn-link):not(.text-decoration-underline):not(.more-link) {
  text-decoration: none !important;
}
a {
  color: var(--cnvs-link-color);
}
a:hover {
  color: var(--cnvs-link-hover-color);
}
a img {
  border: none;
}

img {
  max-width: 100%;
}

/* ----------------------------------------------------------------
	Basic Layout Styles
-----------------------------------------------------------------*/
h1, .h1,
h2,
.h2,
h3,
.h3 {
  color: var(--cnvs-heading-color);
  font-weight: var(--cnvs-headings-font-weight);
  line-height: var(--cnvs-line-height-base);
  margin: 0 0 30px 0;
  font-family: var(--cnvs-primary-font);
}

h1, .h1 {
  font-size: var(--cnvs-font-size-h1);
}

h2, .h2 {
  font-size: var(--cnvs-font-size-h2);
}

h3, .h3 {
  font-size: var(--cnvs-font-size-h3);
}

@media (max-width: 767.98px) {
  h1, .h1 {
    font-size: 1.75rem;
  }
  h2, .h2 {
    font-size: 1.5rem;
  }
  h3, .h3 {
    font-size: 1.25rem;
  }
}
h1 > span:not(.nocolor):not(.badge), .h1 > span:not(.nocolor):not(.badge),
h2 > span:not(.nocolor):not(.badge),
.h2 > span:not(.nocolor):not(.badge),
h3 > span:not(.nocolor):not(.badge),
.h3 > span:not(.nocolor):not(.badge) {
  color: var(--cnvs-themecolor);
}

p,
ul,
address,
form {
  margin-bottom: 30px;
}

small, .small {
  font-size: var(--cnvs-font-size-small);
}

/*-----------------------------------------------------------------------------------

	Utilities.scss

-----------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Helper Classes
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Text Contrast Color Utility Classes
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	BG Contrast Color Utility Classes
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Border Contrast Color Utility Classes
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Font Weight Utility Classes
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Letter Spacing Utility Classes
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Text Stroke
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Font Families
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Text Underline Offset
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Image fit Objects
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Image Object & Background Positions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Background Sizes
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Image Scale Utility Classes
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Opacity Utility Classes
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Text Sizing Utility
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Text Color Utility Classes
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	BG Color Utility Classes
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Gradient Utility Classes
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Bootstrap Utility Classes Extended
-----------------------------------------------------------------*/
/*	Gutters */
/* ----------------------------------------------------------------
	col-mb-classes & Bootstrap Utility Classes Extended
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Height Utility Classes
-----------------------------------------------------------------*/

.h-100 {
  height: 100% !important;
}
/* ----------------------------------------------------------------
	Position Utility Classes Extended
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Lazy Loading
-----------------------------------------------------------------*/
.lazy {
  opacity: 0;
}
.lazy:not(.initial) {
  transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
  .lazy:not(.initial) {
    transition: none;
  }
}
img.lazy {
  max-width: 100%;
  height: auto;
}
img.lazy:not([src]) {
  visibility: hidden;
}

/* ----------------------------------------------------------------
	Borders
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Max-width Utility Classes
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Text Sizes Utility Classes
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	X/Y Positioning Classes
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Square Sizes Utility Classes
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Rotation Utility Classes
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Max-width Utility Classes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Shadow
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	translate
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Float Animation
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	z-Index
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------

	topbar.scss

-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Top Bar
-----------------------------------------------------------------*/

/* Top Links
---------------------------------*/

/* Top Social
-----------------------------------------------------------------*/

/* Top Login
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------

	header.scss

-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Header
-----------------------------------------------------------------*/
:root {
}

#header {
  /*  Floating Header */
  /*  Side Header */
  /*  Primary Menu */
  position: relative;
}

/* ----------------------------------------------------------------
	Logo
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Header Right Area
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Primary Menu
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Mega Menu
-----------------------------------------------------------------*/

/* Mobile Menu: Off Canvas
-----------------------------------------------------------------*/

/* Mobile Menu: Overlay
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Top Search
-----------------------------------------------------------------*/

/* Top Search Animation */

/* ----------------------------------------------------------------
	Top Cart
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Page Menu
-----------------------------------------------------------------*/

/* Page Menu - Dots Style
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	One Page
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Side Push Panel
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------

	slider.scss

-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Flex Slider
-----------------------------------------------------------------*/
:root {
}

:root {
}

/* ----------------------------------------------------------------
	Slider
-----------------------------------------------------------------*/
/* Boxed Slider
-----------------------------------------------------------------*/

/* Swiper Slider
-----------------------------------------------------------------*/

/* Video Overlay
-----------------------------------------------------------------*/

/* Slider Caption
-----------------------------------------------------------------*/

/* Slider Arrows
-----------------------------------------------------------------*/

/* Slide Number
-----------------------------------------------------------------*/

/* Pagination
-----------------------------------------------------------------*/

/* Flex Slider - Navigation
-----------------------------------------------------------------*/

/* Flex Slider - Pagination & Thumbs
-----------------------------------------------------------------*/

/* Flex Slider: Pagination Positions
-----------------------------------------------------------------*/

/* Flex Slider: Thumbs
-----------------------------------------------------------------*/

/* FlexSlider: Thumbs - Flexible
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	pagetitle.scss
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Page Title
-----------------------------------------------------------------*/
:root {
}
/* ----------------------------------------------------------------

	content.scss

-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Content
-----------------------------------------------------------------*/
#content {
  position: relative;
  background-color: var(--cnvs-body-bg);
}

/* ----------------------------------------------------------------

	portfolio.scss

-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Portfolio
-----------------------------------------------------------------*/
:root {
}

/* Grid - Filter
-----------------------------------------------------------------*/

/* Portfolio - Shuffle Icon
-----------------------------------------------------------------*/

/* Portfolio - Items
-----------------------------------------------------------------*/
/* Portfolio - Item Title
-----------------------------------------------------------------*/

/* Portfolio - Parallax
-----------------------------------------------------------------*/

/* Portfolio Single - Image
-----------------------------------------------------------------*/

/* Masonry Thumbs
-----------------------------------------------------------------*/

/* Portfolio Single - Content
-----------------------------------------------------------------*/

/* Portfolio Single - Meta
-----------------------------------------------------------------*/

/* Portfolio Single Navigation
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------

	blog.scss

-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Blog
-----------------------------------------------------------------*/
:root {
}

/* Blog - Grid
-----------------------------------------------------------------*/

/* Blog - Timeline
-----------------------------------------------------------------*/

@media (min-width: 992px) {
  /* Blog - Timeline - Sidebar
  -----------------------------------------------------------------*/
}

/* ----------------------------------------------------------------
	Comments List
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Comment Form
-----------------------------------------------------------------*/

/* Post Elements
-----------------------------------------------------------------*/

/* Post Reading Progress
-----------------------------------------------------------------*/

/* Post Table of Contents
-----------------------------------------------------------------*/

/* Post Share Rail
-----------------------------------------------------------------*/
/* Post Longread
-----------------------------------------------------------------*/

/* Post Chip
-----------------------------------------------------------------*/

/* Post Card Overlay
-----------------------------------------------------------------*/
/* Post Magazine Rails
-----------------------------------------------------------------*/

/* Post Split Feed
-----------------------------------------------------------------*/
/* Post Photo Essay
-----------------------------------------------------------------*/

/* Post Interview
-----------------------------------------------------------------*/

/* Post Newsletter Issue
-----------------------------------------------------------------*/
/* Post Immersive Hero
-----------------------------------------------------------------*/

/* Post Taxonomy & Author Archives
-----------------------------------------------------------------*/

/* Post Single Furniture
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------

	shop.scss

-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Shop
-----------------------------------------------------------------*/
:root {
}

/* Shop - Single
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Cart
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------

	event.scss

-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Events
-----------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------
	shortcodes
-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------

	Shortcodes: countdown.scss

-----------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------

	Countdown

-----------------------------------------------------------------*/

/* Countdown - Coming Soon
-----------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------

	Shortcodes: buttons.scss

-----------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Buttons
-----------------------------------------------------------------*/
.button {
  --cnvs-btn-padding-x: 1.375rem;
  --cnvs-btn-padding-y: 0.5rem;
  --cnvs-btn-fontsize: 1rem;
  --cnvs-btn-color: var(--cnvs-themecolor);
  --cnvs-btn-color-dark: var(--bs-gray-900);
  --cnvs-btn-lineheight: calc(var(--cnvs-btn-fontsize) * 1.6);
  --cnvs-btn-border-width: 1px;
  --cnvs-btn-icon-margin: 10px;
  --cnvs-btn-icon-margin-offset: 0px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  margin: 5px;
  padding: var(--cnvs-btn-padding-y) var(--cnvs-btn-padding-x);
  font-size: var(--cnvs-btn-fontsize);
  line-height: var(--cnvs-btn-lineheight);
  text-align: center;
  background-color: var(--cnvs-btn-color);
  color: #fff;
  font-weight: 500;
  border: var(--cnvs-btn-border-width) solid transparent;
}
.button i {
  position: relative;
  margin-right: calc(var(--cnvs-btn-icon-margin) + var(--cnvs-btn-icon-margin-offset));
  width: 1rem;
  text-align: center;
}
.button {
  transition: all 0.2s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
}
.button:hover {
  background-color: var(--cnvs-btn-color-dark);
  color: #fff;
}
.button {
  /* Buttons - Border
  -----------------------------------------------------------------*/
}
.button {
  /* Buttons - 3D
  -----------------------------------------------------------------*/
}
.button {
  /* Buttons - Icon Reveal
  -----------------------------------------------------------------*/
}

/* Buttons - Promo 100% Width
-----------------------------------------------------------------*/

/* Buttons - Circle
-----------------------------------------------------------------*/

/* Buttons - Flat
-----------------------------------------------------------------*/

/* Buttons - Action
-----------------------------------------------------------------*/

/* Buttons - Fill Effect
-----------------------------------------------------------------*/

/* Buttons - Fill Effect
-----------------------------------------------------------------*/

/* Buttons - Icon Animations
-----------------------------------------------------------------*/

/* Buttons - Text Animations
-----------------------------------------------------------------*/

/* Buttons - Colors
-----------------------------------------------------------------*/

/* Buttons - No Hover
-----------------------------------------------------------------*/

/* Buttons - States
-----------------------------------------------------------------*/
 .button:disabled {
  opacity: 0.65 !important;
  pointer-events: none !important;
}

/*-----------------------------------------------------------------------------------

	Shortcodes: promo.scss

-----------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Promo Boxes
-----------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------

	Shortcodes: feature-box.scss

-----------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Featured Boxes
-----------------------------------------------------------------*/

/* Animated Icon Hovers
-----------------------------------------------------------------*/

/* Icon Effects - Bordered
-----------------------------------------------------------------*/

/* Media Featured Box
-----------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------

	Shortcodes: process-steps.scss

-----------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Process Steps
-----------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------

	Shortcodes: alerts.scss

-----------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Alerts
-----------------------------------------------------------------*/

.alert i {
  position: relative;
  top: 1px;
  font-size: 0.875rem;
  width: 0.875rem;
  text-align: center;
  margin-right: 5px;
}

/*-----------------------------------------------------------------------------------

	Shortcodes: styled-icons.scss

-----------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Styled Icons
-----------------------------------------------------------------*/

/* Icon Size - Small
-----------------------------------------------------------------*/

/* Icon Size - Small
-----------------------------------------------------------------*/

/* Icon Size - Large
-----------------------------------------------------------------*/

/* Icon Size - Extra Large
-----------------------------------------------------------------*/

/* Icon Size - Extra Extra Large
-----------------------------------------------------------------*/

/* Icon Lists
-----------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------

	Shortcodes: social-icons.scss

-----------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Social Icons
-----------------------------------------------------------------*/

/* Social Icons - Group
-----------------------------------------------------------------*/
[class*=-flex],
[class*=row] {
}

/* Social Icons - Sticky
-----------------------------------------------------------------*/

/* Social Icons - colors
-----------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------

	Shortcodes: toggles-accordions.scss

-----------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Toggle
-----------------------------------------------------------------*/

/* Toggle - Content
-----------------------------------------------------------------*/

/* Toggle - with Title Background
-----------------------------------------------------------------*/

/* Toggle - Bordered
-----------------------------------------------------------------*/

/* Toggle - FAQs
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Accordions
-----------------------------------------------------------------*/

/* Accordion - with Title Background
-----------------------------------------------------------------*/

/* Accordion - Bordered
-----------------------------------------------------------------*/

/* Accordion - Large
-----------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------

	Shortcodes: tabs.scss

-----------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Tabs
-----------------------------------------------------------------*/

/* Bootstrap Tabs */

/* Tab Icons */

/* Tab Bordered */
/*-----------------------------------------------------------------------------------

	Shortcodes: faqs.scss

-----------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------
	FAQ List
-----------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------

	Shortcodes: clients.scss

-----------------------------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Clients
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Testimonials
-----------------------------------------------------------------*/
/* Testimonials - Grid
-----------------------------------------------------------------*/

/* Testimonial - Pagination
-----------------------------------------------------------------*/

/* Testimonial - Full Scroller
-----------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------

	Shortcodes: team.scss

-----------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Team
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Team: Hover-Reveal Bio
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Team: Tabbed by Department
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Team: Sticky Spotlight + Scrolling Roster
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Team: Org Chart (Hierarchical)
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Team: Pull-Quote Leader Block
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Team: Magazine Spread
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Team: Filterable Directory
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Team: Uniform Thumbnail Row
	Normalises mixed-aspect portraits in a plain `.team` grid so every
	thumbnail renders at the same height.
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Team: Stats Row
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Team: Parallax / Stacked Cards
	Uses Canvas's `.parallax.scroll-detect` + `img.parallax-bg` so the
	hero image translates at a different rate than the page via the
	--cnvs-scroll-percent custom property that ScrollDetect.js updates
	on every scroll frame. Stacked cards below use scroll-detect with
	their own translate3d offsets for a layered reveal.
-----------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------

	Shortcodes: pricing.scss

-----------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Pricing Boxes
-----------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------

	Shortcodes: counter-skills.scss

-----------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Counter
-----------------------------------------------------------------*/
.counter {
  --cnvs-counter-font-size: 42px;
  --cnvs-counter-font-weight: 700;
  --cnvs-counter-font-family: var(--cnvs-primary-font);
  font-size: var(--cnvs-counter-font-size);
  font-weight: var(--cnvs-counter-font-weight);
  font-family: var(--cnvs-counter-font-family);
}

/* ----------------------------------------------------------------
	Animated Rounded Skills
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Skills Bar
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Skills Bar
-----------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------

	Shortcodes: carousels.scss

-----------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Owl Carousel CSS
-----------------------------------------------------------------*/

/* Owl Carousel - Controls
-----------------------------------------------------------------*/

/* Owl Carousel - Controls - Arrows
-----------------------------------------------------------------*/

/* Owl Carousel - Controls - Dots
-----------------------------------------------------------------*/

/* Owl Carousel - Controls - Dots - Positions
-----------------------------------------------------------------*/

/* Owl Carousel - Controls - Dots - Sizes
-----------------------------------------------------------------*/

/* Owl Carousel - Controls - Dots - Border
-----------------------------------------------------------------*/

/* Owl Carousel - Controls - Dots - square
-----------------------------------------------------------------*/

/* Owl Carousel - Controls - Dots - square
-----------------------------------------------------------------*/

/* Owl Carousel - Controls - Dots - Dashed
-----------------------------------------------------------------*/

/* Owl Carousel - Controls - Dots - Numbers
-----------------------------------------------------------------*/

/* Owl Carousel - Controls - Arrows - Sizes
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------

	Flip Cards

-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Flip Cards
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------

	Reveal Boxes

-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Reveal Box - Base
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Reveal Box - Style 1: Slide Up Reveal
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Reveal Box - Style 2: Colour Curtain
	A themed panel wipes up from the bottom behind the content.
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Reveal Box - Style 3: Icon Swap
	Icon lifts away as the copy slides in behind it.
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Reveal Box - Style 4: Side Wipe
	Panel wipes in horizontally; respects RTL via logical properties.
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Reveal Box - Style 5: Horizontal Accordion
	Layout comes from the Bootstrap grid (.row + .col-12 .col-md); this
	only adds the grow-on-interact behaviour, so stacking on small
	screens is handled by the framework rather than a custom media query.
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Reveal Box - Style 6: List Rows
	Full width rows; a themed fill sweeps across on hover.
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Reveal Box - Sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------

	Motion Objects

	Scroll-reactive decorative objects: SVG particle fields, CSS 3D
	solids, abstract gradient orbs and floating layers. Motion is driven
	by Canvas's ScrollDetect custom properties (--cnvs-scroll-percent /
	--cnvs-scroll-start) applied inline, so no extra JS is required.

-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Motion - Stage
-----------------------------------------------------------------*/

/* Soft radial scrim so decorative shapes never fight the copy */

/* ----------------------------------------------------------------
	Motion - Grid Backdrop
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Motion - Gradient Orbs
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Motion - Float Loop
	Ambient idle movement, independent of scroll.
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Motion - Hover Lift
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Motion - 3D Solids
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Motion - Marker Ribbons
	A fat zigzag stroke with round caps/joins reads as a hand-drawn
	marker sweep with bulbous terminals. Stroked (not filled) so the
	geometry stays editable and the weight is one number.
-----------------------------------------------------------------*/

/* Corner accents bleed off-canvas, framing content without touching it */
/* Sticker badge: wobbly rounded blob behind a numeral */

/* ----------------------------------------------------------------
	Motion - SVG Particles & Strokes
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Motion - Reduced Motion
-----------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------

	Shortcodes: headings.scss

-----------------------------------------------------------------------------------*/
/* Titular
-----------------------------------------------------------------*/

/* Block Titles
-----------------------------------------------------------------*/

/* Heading Block - with Subtitle
-----------------------------------------------------------------*/

/* Emphasis Title
-----------------------------------------------------------------*/

/* Justify Border Title
-----------------------------------------------------------------*/

/* Fancy Title - Center Align
-----------------------------------------------------------------*/

/* Fancy Title - Right Align
-----------------------------------------------------------------*/

/* Fancy Title - Bottom Short Border
-----------------------------------------------------------------*/

/* Sub Heading
-----------------------------------------------------------------*/
:root {
}

/*-----------------------------------------------------------------------------------

	Shortcodes: dividers.scss

-----------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Divider
-----------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------

	Shortcodes: misc.scss

-----------------------------------------------------------------------------------*/
/* Infinity Scroll - Message Style
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Quotes & Blockquotes
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Cascading Images
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Hover 3D
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Scroll Effects
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Dropcaps & Highlights
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Text Rotater
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Underliner
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Overlays
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Google Maps
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Google Custom Search
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Magazine Specific Classes
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Go To Top
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Read More
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	GDPR Settings
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Error 404
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Landing Pages
-----------------------------------------------------------------*/

/* Navigation Tree
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Wedding
-----------------------------------------------------------------*/

/* --------------------------------------------------------------
	SWITCH
--------------------------------------------------------------  */

/* --------------------------------------------------------------
	SWITCH 1 - ROUND
----------------------------------------------------------------- */

/* -----------------------------------------------------------
	SWITCH 2 - ROUND FLAT
-------------------------------------------------------------- */

/* -----------------------------------------------------------
	Tour Driver
-------------------------------------------------------------- */
/* ----------------------------------------------------------------------------
	Canvas Cursor
---------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
	Grid Border
---------------------------------------------------------------------------- */

/* -----------------------------------------------------------
	Media Actions
-------------------------------------------------------------- */

/* -----------------------------------------------------------
	App Menu
-------------------------------------------------------------- */

/* -----------------------------------------------------------
	Circle Stack
-------------------------------------------------------------- */

/* -----------------------------------------------------------
	Ticker
-------------------------------------------------------------- */

/*-----------------------------------------------------------------------------------

	Shortcodes: Forms.scss

-----------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Forms
-----------------------------------------------------------------*/
:root {
  --cnvs-input-btn-input-color: var(--bs-body-color);
  --cnvs-input-btn-input-bg: var(--bs-body-bg);
  --cnvs-input-btn-border-color: var(--bs-border-color);
  --cnvs-input-label-mb: 0.5rem;
  --cnvs-form-label-font-weight: 500;
}

form {
}

.form-control {
  --cnvs-input-btn-padding-y: 0.375rem;
  --cnvs-input-btn-padding-x: 0.75rem;
  --cnvs-input-btn-font-size: 1rem;
  --cnvs-input-font-family: ;
  --cnvs-input-btn-font-weight: 400;
  --cnvs-input-btn-line-height: 1.5;
  --cnvs-input-btn-input-color: var(--bs-body-color);
  --cnvs-input-btn-input-bg: var(--bs-body-bg);
  --cnvs-form-control-radius: var(--bs-border-radius);
  --cnvs-input-btn-border-width: var(--bs-border-width);
  --cnvs-input-btn-border-color: var(--bs-border-color);
  --cnvs-input-focus-color: var(--bs-body-color);
  --cnvs-input-focus-bg: var(--bs-body-bg);
  --cnvs-input-focus-border-color: rgb(134, 182.5, 254);
  --cnvs-input-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  padding: var(--cnvs-input-btn-padding-y) var(--cnvs-input-btn-padding-x);
  font-size: var(--cnvs-input-btn-font-size);
  font-family: var(--cnvs-input-font-family);
  font-weight: var(--cnvs-input-btn-font-weight);
  line-height: var(--cnvs-input-btn-line-height);
  color: var(--cnvs-input-btn-input-color);
  background-color: var(--cnvs-input-btn-input-bg);
  border: var(--cnvs-input-btn-border-width) solid var(--cnvs-input-btn-border-color);
  border-radius: var(--cnvs-form-control-radius);
}
.form-control:focus {
  color: var(--cnvs-input-focus-color);
  background-color: var(--cnvs-input-focus-bg);
  border-color: var(--cnvs-input-focus-border-color);
  box-shadow: var(--cnvs-input-focus-box-shadow);
}
.form-control {
  /* ----------------------------------------------------------------
  	Border Form Control
  -----------------------------------------------------------------*/
}

label {
  margin-bottom: var(--cnvs-input-label-mb);
  font-weight: var(--cnvs-form-label-font-weight);
}

/* ----------------------------------------------------------------
	Contact Form
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Preloaders
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------

	footer.scss

-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Footer
-----------------------------------------------------------------*/
#footer {
  --cnvs-footer-top-border: 5px solid rgba(var(--cnvs-contrast-rgb), 0.15);
  position: relative;
  background-color: var(--cnvs-footer-bg);
  border-top: var(--cnvs-footer-top-border);
}

/* ----------------------------------------------------------------

	widgets.scss

-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Widgets
-----------------------------------------------------------------*/
:root {
}
/* Widget - Quick Contact Form
-----------------------------------------------------------------*/

/* Newsletter Widget
-----------------------------------------------------------------*/

/* Twitter Feed Widget
-----------------------------------------------------------------*/

/* Widget Filter Links
-----------------------------------------------------------------*/

/* Tag Cloud
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------

	Paginations.scss

-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Styled Paginations
-----------------------------------------------------------------*/
:root {
}

/* ----------------------------------------------------------------
	extras.scss
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Bootstrap Specific
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Shape Dividers
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	HTML5 Youtube Video Backgrounds
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Datepicker Component
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Star Ratings Component
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Custom Animate.css Styles
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------

	pageloaders.scss

-----------------------------------------------------------------*/
:root {
}

/* ----------------------------------------------------------------
	Page Transitions
-----------------------------------------------------------------*/

/* Magnific Popup SCSS */
:root {
}
button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

/* Main image in popup */

/* The shadow behind the image */

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
   * Remove all paddings around the image on small screen
   */
}
/*!
 * animate.css - https://animate.style/
 * Version - 4.1.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2020 Animate.css
 */
:root {
}

/* Attention seekers  */

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@keyframes tada {
  from {
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
.tada {
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

/* Back entrances */

/* Back exits */

/* Bouncing entrances  */

/* Bouncing exits  */

/* Fading entrances  */

/* Fading exits */

/* Flippers */

/* Lightspeed */

/* Rotating entrances */

/* Rotating exits */

/* Specials */

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

/* Zooming entrances */

/* Zooming exits */

/* Sliding entrances */

/* Sliding exits */

/*-----------------------------------------------------------------------------------
	Dark Scheme - sass/dark.scss
-----------------------------------------------------------------------------------*/

/* Pencil Buddy on top of Canvas (theme/canvas.css). Colours come from the
   app icon: orange-to-pink background, yellow pencil, navy ink. */

:root {
	--pb-ink: #1F2A5C;
	--pb-ink-soft: #4A5480;
	--pb-orange: #FFA64D;
	--pb-pink: #FF5E7E;
	--pb-yellow: #FFC23D;
	--pb-cream: #FDE3A1;
	--pb-paper: #FFFBF2;
	--pb-font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, -apple-system, "Segoe UI", sans-serif;

	--cnvs-themecolor: var(--pb-pink);
	--cnvs-themecolor-rgb: 255, 94, 126;
	--cnvs-body-font: var(--pb-font);
	--cnvs-primary-font: var(--pb-font);
	--cnvs-secondary-font: var(--pb-font);
	--bs-body-font-family: var(--pb-font);
	--bs-body-color: var(--pb-ink);
	--bs-body-bg: var(--pb-paper);
	--bs-link-color: #D93A5D;
	--bs-link-color-rgb: 217, 58, 93;
	--bs-link-hover-color: var(--pb-ink);
}

body {
	font-family: var(--pb-font);
	color: var(--pb-ink);
	background: var(--pb-paper);
}

h1, h2, h3, h4,
.h1, .h2, .h3, .display-3 {
	font-family: var(--pb-font);
	font-weight: 800;
	color: var(--pb-ink);
	letter-spacing: -0.02em;
}

p,
li {
	font-size: 1.125rem;
}

.lead {
	font-size: 1.3rem;
	color: var(--pb-ink-soft);
}

.text-muted-strong {
	color: var(--pb-ink-soft);
}

a {
	color: var(--bs-link-color);
	text-underline-offset: 3px;
}

/* Header */
.site-header {
	background: var(--pb-cream);
}

.site-header nav a,
.site-footer nav a {
	color: var(--pb-ink);
	font-weight: 600;
	text-decoration: none;
}

.site-header nav a:hover,
.site-footer nav a:hover {
	color: var(--bs-link-color);
}

.brand span {
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--pb-ink);
	letter-spacing: -0.02em;
}

.lang-switch {
	padding: 0.3rem 0.8rem;
	border: 2px solid var(--pb-ink);
	border-radius: 999px;
	font-size: 0.95rem;
}

/* Hero */
.hero {
	position: relative;
	background: var(--pb-cream);
	padding-bottom: 60px;
}

.kicker {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--pb-ink-soft);
}

.sheet-note {
	display: inline-block;
	padding: 0.6rem 1rem;
	border-radius: 16px;
	background: #FFF;
	box-shadow: 0 2px 0 rgba(31, 42, 92, 0.08);
}

.hero-img {
	width: min(360px, 80%);
	height: auto;
	filter: drop-shadow(0 18px 30px rgba(255, 94, 126, 0.3));
}

@media (max-width: 991.98px) {
	.hero-img { width: 220px; }
}

.float-anim {
	animation: pb-float 4s ease-in-out infinite;
}

@keyframes pb-float {
	50% { transform: translateY(-14px); }
}

@media (prefers-reduced-motion: reduce) {
	.float-anim { animation: none; }
}

/* Wavy edges between the cream and paper areas */
.wave {
	position: absolute;
	left: 0;
	right: 0;
	height: 60px;
	background: var(--pb-paper);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C150 0 300 0 450 30 S750 60 900 30 S1150 0 1200 20 V60 H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C150 0 300 0 450 30 S750 60 900 30 S1150 0 1200 20 V60 H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.wave-bottom {
	bottom: 0;
}

.wave-top {
	top: 0;
	transform: scaleY(-1);
}

/* Buttons */
.btn-appstore,
.btn-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.6rem;
	border: 0;
	border-radius: 16px;
	background: var(--pb-ink);
	color: #FFF;
	font-size: 1.1rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 4px 0 #0E1538;
	transition: transform 0.1s, box-shadow 0.1s;
}

.btn-cta {
	background: var(--pb-pink);
	box-shadow: 0 4px 0 #C93A59;
}

a.btn-appstore:hover,
.btn-cta:hover {
	color: #FFF;
	transform: translateY(2px);
	box-shadow: 0 2px 0 #0E1538;
}

.btn-cta:hover {
	box-shadow: 0 2px 0 #C93A59;
}

.btn-appstore.is-soon {
	background: transparent;
	color: var(--pb-ink);
	border: 2px dashed var(--pb-ink);
	box-shadow: none;
}

/* Category cards */
.cat-card {
	padding: 1.75rem;
	border-radius: 24px;
}

.cat-card h3 {
	font-size: 1.6rem;
	margin-bottom: 1rem;
	color: inherit;
}

.cat-card ul {
	margin: 0;
	padding-left: 1.2rem;
}

.cat-card li {
	margin-bottom: 0.4rem;
	font-size: 1.05rem;
}

.cat-0 { background: #FFE0E7; color: #8E1F3B; }
.cat-1 { background: #DDEBFF; color: #1F3F7A; }
.cat-2 { background: #E3F2D0; color: #34510D; }
.cat-3 { background: #FFE6CC; color: #8A3B12; }
.cat-4 { background: #EDE3FF; color: #4A2A8A; }
.cat-parents { background: var(--pb-ink); color: #FFF; }

/* Samples */
.samples {
	background: #FFF;
}

.sample {
	display: block;
	text-align: center;
	color: var(--pb-ink);
	text-decoration: none;
}

.sample img {
	width: 100%;
	height: auto;
	aspect-ratio: 210 / 297;
	object-fit: cover;
	border-radius: 12px;
	box-shadow: 0 6px 20px rgba(31, 42, 92, 0.12);
	transition: transform 0.15s;
}

.sample:hover img {
	transform: translateY(-4px) rotate(-1deg);
}

.sample-title {
	display: block;
	margin-top: 0.8rem;
	font-weight: 700;
}

.sample-get {
	font-size: 0.95rem;
	color: var(--bs-link-color);
}

/* Text pages */
.narrow {
	max-width: 760px;
}

.page h2 {
	font-size: 1.5rem;
	margin-top: 2.2rem;
}

/* Android sign-up */
.signup {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin: 1.5rem auto 0;
	max-width: 520px;
}

.signup .form-control {
	flex: 1 1 240px;
	padding: 0.8rem 1rem;
	border: 2px solid var(--pb-ink);
	border-radius: 16px;
	font-size: 1.1rem;
}

.signup .form-control:focus {
	border-color: var(--pb-pink);
	box-shadow: 0 0 0 4px rgba(255, 94, 126, 0.25);
}

.hp {
	position: absolute;
	left: -10000px;
}

.form-note {
	margin-top: 1rem;
	font-weight: 700;
}

.form-note.is-error { color: #B3261E; }
.form-note.is-done { color: #2E6B12; font-size: 1.3rem; }

/* Footer */
.site-footer {
	position: relative;
	margin-top: 3rem;
	padding-top: 40px;
	background: var(--pb-cream);
}