/********************************************************************************************************
    PIXEL TO REM CONVERSION TABLE - Root Size: 16px
---------------------------------------------------------------------------------------------------------
    PX   REM / EM |  PX   REM / EM |  PX   REM / EM |  PX   REM / EM |  PX   REM     |  PX   REM / EM
---------------------------------------------------------------------------------------------------------
    10 = 0.625    |  20 = 1.25     |  30 = 1.875    |  40 = 2.5      |  50 = 3.125   |  60 = 3.75
    11 = 0.6875   |  21 = 1.3125   |  31 = 1.9375   |  41 = 2.5625   |  51 = 3.1875  |  61 = 3.8125
    12 = 0.75     |  22 = 1.375    |  32 = 2        |  42 = 2.625    |  52 = 3.25    |  62 = 3.875
    13 = 0.8125   |  23 = 1.4375   |  33 = 2.0625   |  43 = 2.6875   |  53 = 3.3125  |  63 = 3.9375
    14 = 0.875    |  24 = 1.5      |  34 = 2.125    |  44 = 2.75     |  54 = 3.375   |  64 = 4
    15 = 0.9375   |  25 = 1.5625   |  35 = 2.1875   |  45 = 2.8125   |  55 = 3.4375
    16 = 1        |  26 = 1.625    |  36 = 2.25     |  46 = 2.875    |  56 = 3.5
    17 = 1.0625   |  27 = 1.6875   |  37 = 2.3125   |  47 = 2.9375   |  57 = 3.5625
    18 = 1.125    |  28 = 1.75     |  38 = 2.375    |  48 = 3        |  58 = 3.625
    19 = 1.1875   |  29 = 1.8125   |  39 = 2.4375   |  49 = 3.0625   |  59 = 3.6875
---------------------------------------------------------------------------------------------------------
*********************************************************************************************************/

:root {
	--defaultYellow: hsla(53, 98%, 65%, 1);
	--defaultBlack: hsl(0, 0%, 9%);
	--defaultWhite: rgba(255,255,255);
	--defaultFontBlack: hsl(0, 0%, 0%);
	--defaultBrown: hsl(0, 6%, 23%);
}

/**  ------------------------------ FONTS RELATED -------------------------------- */
.font-weight-semibold,
h1, .h1,
h2, .h2, .heading,
h3, .h3, .sub-heading,
h4, .h4, .sub-content,
h5, .h5, .content-p-bold,
h6, .h6, .content-note { line-height: 1.5 !important; font-weight: 600 !important; }
p, .p, .content-p { line-height: 1.5 !important; }

.font-weight-regular,
h1.font-weight-regular, .h1.font-weight-regular,
h2.font-weight-regular, .h2.font-weight-regular, .heading.font-weight-regular,
h3.font-weight-regular, .h3.font-weight-regular, .sub-heading.font-weight-regular,
h4.font-weight-regular, .h4.font-weight-regular, .sub-content.font-weight-regular,
h5.font-weight-regular, .h5.font-weight-regular, .content-p-bold.font-weight-regular,
h6.font-weight-regular, .h6.font-weight-regular, .content-note.font-weight-regular { font-weight: 400 !important; }

.font-weight-bold { font-weight: 600 !important; }
.text__bold { font-weight: 700; }

h1, .h1 { font-size: 4vw !important; }
h2, .h2, .heading { font-size: 3vw !important; }
h3, .h3, .sub-heading { font-size: 2.25vw !important; }
h4, .h4, .sub-content { font-size: 1.5vw !important; }
h5, .h5, .content-p-bold { font-size: 1.125vw !important; font-weight: 700; }
h6, .h6, .content-note { font-size: 0.75vw !important; }
p, .p, .content-p { font-size: 1vw !important; }

.heading {
	font-weight: 700;
	font-size: 2.2rem;
	position: relative
	color: var(--defaultFontBlack);
}

/* .heading::before {
	content: '';
	transform: translate(-50%, -50%);
	position: absolute;
	bottom: -0.5em;
	left: 50%;
	height: 5px;
	width: 2em;
	background-color: var(--defaultBlack);
} */

.section-button {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--defaultYellow);
	transition: 0.3s ease;
	cursor: pointer;
}

.section-button:hover {
	background-color: white;
}

.section-button h2 {
	font-size: 1.7rem;
	color: black;
	font-weight: 600;
}
@media screen and (min-width: 1500px) {
              
	  	/** FONTS RELATED */
		h1, .h1 { font-size: 4rem !important; }
		h2, .h2, .heading { font-size: 3rem !important; }
		h3, .h3, .sub-heading { font-size: 2.25rem !important; }
		h4, .h4, .sub-content { font-size: 1.5rem !important; }
		h5, .h5, .content-p-bold { font-size: 1.125rem !important; font-weight: 700; }
		h6, .h6, .content-note { font-size: 0.75rem !important; }
		p, .p, .content-p { font-size: 1rem !important; }
}
@media screen and (max-width: 1200px) and (min-width: 1101px) {
    
}
@media screen and (max-width: 1100px) and (min-width: 992px) {

}
/* Landscape phone to portrait tablet */
@media screen and (min-width: 992px ) {
        
}

/* Landscape phone to portrait tablet */
@media screen and (max-width: 991px ) {

		/** FONTS RELATED */
		h1, .h1 { font-size: 3rem !important; }
		h2, .h2, .heading { font-size: 2.25rem !important; }
		h3, .h3, .sub-heading { font-size: 1.875rem !important; }
		h4, .h4, .sub-content { font-size: 1.5rem !important; }
		h5, .h5, .content-p-bold { font-size: 1.125rem !important; font-weight: 700; }
		h6, .h6, .content-note { font-size: 0.75rem !important; }
		p, .content-p { font-size: 1rem !important; }
}

/* Landscape phone to portrait tablet */
@media screen and (max-width: 767px ) {
        
}
@media screen and (max-width: 667px){	
       
}

/* Landscape phones and down */
@media screen and (max-width: 480px) {
        
		/** FONTS RELATED */
		h1, .h1 { font-size: 2.86rem !important; }
		h2, .h2, .heading { font-size: 2.15rem !important; }
		h3, .h3, .sub-heading { font-size: 1.675rem !important; }
		h4, .h4, .sub-content { font-size: 1.25rem !important; }
		h5, .h5, .content-p-bold { font-size: 1.025rem !important; font-weight: 700; }
		h6, .h6, .content-note { font-size: 0.75rem !important; }
		p, .content-p { font-size: 0.96rem !important; }
}
@media screen and (max-width: 414px){
        
}
@media screen and (max-width: 360px){
        
}
/**  -------------------------- END FONTS RELATED -------------------------------- */

/**  ----------------------------- BUTTONS RELATED -------------------------------- */
.default-btn {
	padding: 0.3em 1.15em;
	margin: 0px 5px;
	background-color: white;
	border: 1px solid white;
	border-radius: 99px;
	transition: 0.3s ease;
	cursor: pointer;
	/*	font-size: 1rem;
	font-weight: 600;*/
}
.default-btn:hover {
	box-shadow: 10px 10px 10px rgba(26, 26, 26, 0.075);
}
.default-btn:hover,
.default-btn.btn-transparent:hover {
	background-color: var(--defaultYellow);
}

.default-btn.btn-yellow {
	background-color: var(--defaultYellow);
	border: 1px solid var(--defaultYellow);
	color: var(--defaultFontBlack);
}
.default-btn.btn-yellow:hover{
	text-decoration: underline;
}

.default-btn.btn-transparent {
	background-color: transparent;
	border: 1px solid var(--defaultBlack);
}

.default-btn.btn-transparent-white {
	background-color: transparent;
	color: var(--defaultWhite);
	border: 1px solid white;
}
.categories__category:hover .default-btn.btn-transparent-white,
.default-btn.btn-transparent-white:hover {
	background-color: var(--defaultYellow); 
	color: var(--defaultFontBlack);
}

.default-btn.btn-yellow.hover-black:hover,
.default-btn.btn-white.hover-black:hover {
	background-color: var(--defaultFontBlack);
	color: var(--defaultWhite);
}
/**  --------------------------- END BUTTONS RELATED ------------------------------ */

/**  ------------------------------ COLOR RELATED --------------------------------- */
.text-yellow { color: var(--defaultYellow); }
.text-black { color: var(--defaultFontBlack); }
.text-white { color: var(--defaultWhite); }
/**  ---------------------------- END COLOR RELATED ------------------------------- */

/**  ------------------------------- BG RELATED ---------------------------------- */
.gray-bg {
	background: #E5E5E5;
}

.gray-texture-bg {
	background-size: 100%;
	background: #E5E5E5 url("../img/gray-texture-bg.png") center bottom no-repeat;
}

.yellow-bg {
	background: var(--defaultYellow);
}

.yellow-texture-bg {
	background-size: 100%;
	background: var(--defaultYellow) url("../img/yellow-texture-bg.png") center bottom no-repeat;
}

.yellow-texture-bg.big-yellow {
	background-image: url("../img/yellow-big-texture-bg.png");
}
/**  ----------------------------- END BG RELATED -------------------------------- */

/**  ---------------------------- SECTION RELATED -------------------------------- */
.section-padding { padding: 1.5rem 0px; }
.section-extra-padding { padding: 5.5rem 0px; }

/* Landscape phone to portrait tablet */
@media screen and (max-width: 991px ) {

		/** FONTS RELATED */
		.section-padding { padding: 1.5rem 0px; }
		.section-extra-padding { padding: 2.5rem 0px; }
}
/**  -------------------------- END SECTION RELATED ------------------------------- */

html body {
	font-family: 'Kanit', sans-serif;
	font-weight: 400;
	color: var(--defaultFontBlack);
}
body { font-size: 16px; }
img { max-width: 100%; }
img.smush-detected-img { box-shadow: none !important; }
/* @media screen and (min-width: 992px) and (max-width: 1500px){
	html { font-size: 95% !important; }
}*/
main { overflow: hidden; }
main main { margin-top: 0px !important; }
.site-content { overflow: hidden; }

div.elementor > .elementor-section-wrap > .elementor-section.elementor-section-boxed > .elementor-container,
.custom-container { max-width: 90vw; margin: auto; }

.wp-block-image:not(.is-style-rounded) img { height: auto; }

/* Extra large screen */
@media screen and (min-width: 1550px) {

		.custom-container { max-width: 70vw; }
}

@media screen and (max-width: 992px) {

		main { margin-top: 3.4rem !important; }
}

@media screen and (max-width: 768px) {

		:root { font-size: 14px; }

		main { margin-top: 3.6rem !important; }

		.default-btn { padding: 0.3em 1.5em; font-size: 0.8rem; }
}

@media screen and (max-width: 576px) {

		main { margin-top: 3.6rem !important; }

		.default-btn { padding: 0.3rem 1.5rem; font-size: 0.8rem; min-height: 15px; }

		.heading { font-size: 1.7rem; }
}