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

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

:root {
    /* --cnvs-themecolor: #85c98d; */
    /* --cnvs-themecolor-rgb: rgb(133, 201, 141); */
    --cnvs-orange: #fcaa1e;
    --bs-link-color: var(--cnvs-themecolor);
    --bs-link-color-rgb: var(--cnvs-themecolor-rgb);
    --bs-link-hover-color: var(--cnvs-heading-color);
	--bs-body-font-size: 0.875rem;
	--bs-body-font-weight: 400;
    --cnvs-white: #fff;
    --cnvs-black: #000;
    --cnvs-headings-font-weight: 500;
    /* 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: "Poppins", "IBM Plex Sans Thai", sans-serif;
    --cnvs-line-height-base: 1.5;
    --cnvs-line-height-content: 1.3;
    --cnvs-topbar-bg: #001B3D;
    /* Margins */
    --cnvs-copyrights-font-size: 0.75rem;
}

:root {
	--cnvs-themecolor: #92cd99;
	--cnvs-themecolor-2: #0F6458;
	--cnvs-themecolor-rgb: 15, 99, 88;
	--cnvs-color-2: #FFCD8C;
    --cnvs-body-font: "Poppins", "IBM Plex Sans Thai", sans-serif;
    --cnvs-primary-font: "Poppins", "IBM Plex Sans Thai", sans-serif;
    --cnvs-secondary-font: "Poppins", "IBM Plex Sans Thai", sans-serif;
}

#header {
	/*  Primary Menu */
	--cnvs-primary-menu-hover-color: var(--cnvs-themecolor-2);}

#gotoTop {
	--cnvs-gotoTop-size: 2.5rem;
	--cnvs-gotoTop-bg: rgba(0, 0, 0, 0.3);
	--cnvs-gotoTop-icon-size: 1.5rem;
	--cnvs-gotoTop-icon-color: #fff;
	--cnvs-gotoTop-position-boxed-right: 30px;
	--cnvs-gotoTop-position-boxed-bottom: 50px;
	--cnvs-gotoTop-position-botom: 30px;
	--cnvs-gotoTop-border-radius: 2px;
	--cnvs-gotoTop-hover-color: var(--cnvs-themecolor);
	z-index: -999;
	position: fixed;
	width: var(--cnvs-gotoTop-size);
	height: var(--cnvs-gotoTop-size);
	line-height: var(--cnvs-gotoTop-size);
	background-color: var(--cnvs-gotoTop-bg);
	font-size: var(--cnvs-gotoTop-icon-size);
	text-align: center;
	color: var(--cnvs-gotoTop-icon-color);
	top: auto;
	left: auto;
	right: var(--cnvs-gotoTop-position-boxed-right);
	bottom: var(--cnvs-gotoTop-position-boxed-bottom);
	cursor: pointer;
	border-radius: var(--cnvs-gotoTop-border-radius);
	opacity: 0;
	transition: background-color 0.2s linear, opacity 0.4s ease;
}

.grid-filter-wrap {
    display: flex;
    justify-content: center;
}

.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-color: var(--cnvs-heading-color);
	--cnvs-featured-box-font-weight: 600;
	--cnvs-featured-box-font-tt: none;
	--cnvs-featured-box-icon-sm: calc(4rem * 0.5);
	--cnvs-featured-box-padding-x-sm: calc(0.75rem / 1.5);
	--cnvs-featured-box-icon-size-sm: calc(1.75rem / 1.75);
	--cnvs-featured-box-icon-lg: calc(4rem * 1.5);
	--cnvs-featured-box-icon-size-lg: calc(1.75rem * 1.4285714286);
	--cnvs-featured-box-icon-xl: calc(4rem * 2);
	--cnvs-featured-box-icon-size-xl: calc(1.75rem * 2.5714285714);
	--cnvs-featured-box-outline-border: 1px;
	--cnvs-featured-box-outline-padding: 0.25rem;
	--cnvs-featured-box-rounded:	0.25rem;
	--cnvs-featured-box-bg-light:	var(--cnvs-contrast-200);
	--cnvs-featured-box-bg-dark:	#343a40;
	--cnvs-featured-box-plain-font-size: 3rem;
	--cnvs-featured-box-plain-icon-size: 3rem;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	margin-left: calc(-1 * var(--cnvs-featured-box-padding-x));
	margin-right: calc(-1 * var(--cnvs-featured-box-padding-x));
  }

.fbox-content p {
    margin-top: 0.5rem;
    margin-bottom: 0px;
    color: var(--cnvs-contrast-800);
}

.feature-box-border .fbox-color.feature-box:not(.noborder)::after { background-color: #92cd99; }
.fbox-border.fbox-effect .fbox-icon i::after {background-color: #92cd99;}
.nav-pills .nav-link.active {
	background-color: #92cd99;
	margin-bottom: 20px;
	padding: 30px 25px;
}
.nav-pills .nav-link h3 {
	display: block;
	font-size: 22px;
	line-height: 28px;
	margin-bottom: 15px;
	font-weight: 400;
	color: #92cd99;
}

.menu-item.current > .menu-link {
    color: var(--cnvs-primary-menu-active-color);
}