/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/
:root,
[data-bs-theme=light] {
	--bs-body-font-family: var(--cnvs-body-font);
	--bs-body-font-size: 0.85rem;
	--bs-body-font-weight: 300;
	--bs-body-line-height: 1.2;
	--bs-body-color: #212529;
}

:root {
	--cnvs-themecolor:	#dc9814;
	--cnvs-themecolor-rgb:	220, 152, 20;
	--bs-link-color:	var(--cnvs-themecolor);
	--bs-link-color-rgb:	var(--cnvs-themecolor-rgb);
	--bs-link-hover-color:	var(--cnvs-heading-color);
	--cnvs-white:	#fff;
	--cnvs-black:	#000;
	--cnvs-headings-font-weight:	600;
	/* Font Families */
	--cnvs-body-font:	"Poppins", "IBM Plex Sans Thai", sans-serif;
	--cnvs-primary-font:	"Poppins", "IBM Plex Sans Thai", sans-serif;
	--cnvs-secondary-font:	"Playfair Display", serif;
	--cnvs-line-height-base:	1.5;
	--cnvs-line-height-content:	1.65;
  	/* Margins */
  	--cnvs-margin-base:	3rem;
  	--cnvs-margin-sm:	2rem;
  	--cnvs-margin-lg:	5rem;
  	--cnvs-content-padding:	5rem;
  	--cnvs-section-margin:	4rem;
  	--cnvs-section-padding:	var(--cnvs-section-margin);
  	--cnvs-col-padding:	var(--cnvs-section-padding);
  	--cnvs-box-shadow-sm:	0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  	--cnvs-box-shadow:	0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  	--cnvs-box-shadow-lg:	0 1rem 3rem rgba(0, 0, 0, 0.175);
  	--cnvs-copyrights-font-size: 0.75rem;
}

#header {
	 /*  Primary Menu */
	 --cnvs-primary-menu-color:	var(--cnvs-contrast-900);
	 --cnvs-primary-menu-hover-color: var(--cnvs-themecolor);
	 --cnvs-primary-menu-active-color:	var(--cnvs-primary-menu-hover-color);
	 --cnvs-primary-menu-font:	var(--cnvs-primary-font);
	 --cnvs-primary-menu-font-weight:	500;
}

#header-wrap {
    position: fixed;
    height: auto;
    z-index: 299;
    width: 100%;
    background-color: var(--cnvs-header-bg);
    border-bottom: 0px solid var(--cnvs-header-border-color);
    transition: height 0.2s ease 0s, background-color 0.3s ease 0s;
    backface-visibility: hidden;
}

.is-expanded-menu #header.full-header.transparent-header #header-wrap {
    border-bottom: 0px solid var(--cnvs-header-transparent-border-color);
}

.is-expanded-menu .full-header #logo {
    padding-right: 30px;
    border-right: 0px solid var(--cnvs-header-border-color);
}

.is-expanded-menu .full-header .primary-menu .menu-container {
    padding-right: 0.5rem;
    margin-right: 0.5rem;
    border-right: 0px solid var(--cnvs-header-border-color);
}

.heading-block {
	--cnvs-heading-block-font-size-h1: 2.5rem;
	--cnvs-heading-block-font-size-h2: 2.125rem;
	--cnvs-heading-block-font-size-h3: 1.875rem;
	--cnvs-heading-block-font-size-h4: 1.375rem;
	--cnvs-heading-block-font-weight: 600;
	--cnvs-heading-block-font-spacing: 0;
	--cnvs-heading-block-font-color: var(--cnvs-heading-color);
	--cnvs-heading-block-font-transform: uppercase;
	--cnvs-heading-block-center-container: 600px;
	--cnvs-title-block-border-size: 40px;
	--cnvs-heading-block-border: 2px solid var(--cnvs-contrast-400);
	--cnvs-heading-block-span-color: var(--cnvs-contrast-600);
	margin-bottom: 50px;
  }

.heading-block h2 + span, .heading-block .h2 + span,
.heading-block h3 + span,
.heading-block .h3 + span,
.heading-block h4 + span,
.heading-block .h4 + span {
  font-size: calc(var(--cnvs-heading-block-font-size-h2) / 2);}

.portfolio,
[class*=portfolio-] {
  --cnvs-portfolio-desc-padding-x: 0.375rem;
  --cnvs-portfolio-desc-padding-y:	1.25rem;
  --cnvs-portfolio-desc-title-size: 1.25rem;
  --cnvs-portfolio-modal-padding: 2.5rem;
  --cnvs-portfolio-ajax-height: 96rem;
  --cnvs-portfolio-meta-font-size: 0.875rem;
  --cnvs-portfolio-meta-color: var(--cnvs-contrast-600);
  --cnvs-portfolio-meta-row-1: 150px;
  --cnvs-portfolio-meta-row-1-color: var(--cnvs-heading-color);
  --cnvs-portfolio-meta-icon: 0.875rem;
  --cnvs-portfolio-navigation-size: 1.5rem;
}

.portfolio-desc span,
.portfolio-desc span a {
  color: var(--cnvs-contrast-600);
  font-size: var(--cnvs-fon);
}

.feature-box {
	--cnvs-featured-box-icon: 4rem;
	--cnvs-featured-box-padding-x: 0.75rem;
	--cnvs-featured-box-icon-size: 1.75rem;
	--cnvs-featured-box-font-size: 1.125rem;
	--cnvs-featured-box-font-weight: 600;
	--cnvs-featured-box-font-tt: uppercase;
}

.fbox-content h3, .fbox-content .h3 {
	font-size: var(--cnvs-featured-box-font-size);
	font-weight: var(--cnvs-featured-box-font-weight);
	font-family: var(--cnvs-primary-font);
	text-transform: var(--cnvs-featured-box-font-tt);
	margin-bottom: 0;
	color: var(--cnvs-featured-box-font-color);
  }

.fbox-content h3 span.subtitle, .fbox-content .h3 span.subtitle {
    display: block;
    margin-top: 5px;
    color: var(--cnvs-heading-color);
    font-weight: 300;
    text-transform: uppercase;
    font-size: var(--bs-body-font-size);
}

.iconlist {
	--cnvs-iconlist-size: 0.85rem;
	--cnvs-iconlist-color: var(--cnvs-themecolor);
	--cnvs-iconlist-margin: 0.5rem;
	--cnvs-iconlist-gutter: 0.75rem;
	--cnvs-iconlist-offset: 0;
	padding-left: 0;
	margin-left: 0;
	list-style-type: none;
  }

#footer {
    --cnvs-footer-top-border: 0px solid rgba(var(--cnvs-contrast-rgb), 0.15);
    --cnvs-copyrights-link-color: var(--cnvs-contrast-500);
    position: relative;
    background-color: var(--cnvs-footer-bg);
    border-top: var(--cnvs-footer-top-border);
}

#copyrights {
    padding: calc(var(--cnvs-content-padding) * 0.3) 0;
    background-color: var(--cnvs-contrast-300);
    font-size: var(--cnvs-copyrights-font-size);
    line-height: var(--cnvs-line-height-content);
}