/*
Theme Name: Twenty Twenty Child
Description: Twenty Twenty Child Theme
Author: Indaca
Template: twentytwenty
Version: 1.0.0
Text Domain: twentytwenty-child
*/
/* Custom CSS goes after this line */


@font-face {
	font-family: 'Kanit';
	src: url('fonts/Kanit-Regular.woff2') format('woff2'),
		url('fonts/Kanit-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Kanit';
	src: url('fonts/Kanit-ExtraBold.woff2') format('woff2'),
		url('fonts/Kanit-ExtraBold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Kanit';
	src: url('fonts/Kanit-SemiBold.woff2') format('woff2'),
		url('fonts/Kanit-SemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

:root {
	--yel: #fcc246;
	--hv-yel: #fcc246;
	--ass: #121212;
	--black: #1a1919;
	--blck: #121212;
	--wht: #fff;
	--tran: all 0.5s ease;
	--kan: 'Kanit', sans-serif;
	--shadow: 0 0 35px rgba(0, 0, 0, 0.12);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.hel {
	font-family: var(--kan), sans-serif !important;
}

hr {
	margin: 4.3rem auto;
}

.yel {
	color: var(--yel) !important;
}

.wht {
	color: var(--wht);
}

.uppercase {
	text-transform: uppercase;
}

.bld {
	font-weight: 600;
}

::selection {
	background-color: var(--yel);
	color: var(--wht);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 600;
	margin: 0 0 22px 0;
	text-rendering: optimizeLegibility;
	-ms-word-wrap: break-word;
	word-wrap: break-word;
	letter-spacing: normal;
	font-family: var(--kan), sans-serif !important;
	line-height: 1.2;
}

:is(ul, ol):not(:last-child) {
	margin-bottom: 20px;
}

.cntr {
	text-align: center;
}

:is(ul, ol):last-child {
	margin-bottom: 0px;
}

.sub-h {
	font-size: 22px;
	text-transform: uppercase;
	display: inline-block;
	margin-bottom: 10px;
	color: var(--yel);
	font-weight: 400 !important;
	letter-spacing: 7px;
	line-height: 1.2;
}

.heading-tit :is(h1, h2, h3, h4, h5) {
	font-size: 40px;
	text-transform: uppercase;
	margin-bottom: 30px;
	position: relative;
	display: inline-block;
}

.widget_text p,
.widget_text ol,
.widget_text ul,
.widget_text dl,
.widget_text dt,
.widget-content .rssSummary {
	font-family: var(--kan), sans-serif !important;
	margin-bottom: 20px;
	margin-left: 20px;
}

.elementor-widget-text-editor,
.elementor-icon-list-text {
	font-family: var(--kan), sans-serif !important;
}

body {
	font-family: var(--kan), sans-serif !important;
	font-weight: 300;
	text-rendering: optimizeLegibility;
	line-height: 1.5;
	font-size: 15px;
	color: var(--black) !important;
	overflow-x: hidden;
	letter-spacing: normal !important;
}

p:not(:only-child):not(:last-child) {
	margin-bottom: 20px;
}

p,
.elementor-widget-text-editor {
	font-weight: 300 !important;
	line-height: 1.5;
}

.container {
	max-width: 1170px;
	width: 100%;
	padding: 0 10px;
	margin: 0 auto;
}

p:not(:only-child):not(:last-child) {
	margin-bottom: 20px;
}

body section {
	padding: unset;
}

.m-80 {
	margin-block: clamp(50px, 1.0337rem + 5.7692vw, 80px) !important;
}

.p-80 {
	padding-block: clamp(50px, 1.0337rem + 5.7692vw, 80px) !important;
}

.pb-80 {
	padding-bottom: 80px;
}

.p-60 {
	padding-block: clamp(40px, 1.0737rem + 6.7692vw, 70px);
}

.p-40 {
	padding-top: 40px;
	padding-bottom: 40px;
}

.pb-0 {
	padding-bottom: 0px;
}

.pt-0 {
	padding-top: 0px;
}

.space {
	height: 24px;
}

.mt-20 {
	margin-top: 20px;
}

body b,
body strong {
	font-weight: 600;
}

/* header */
.header-inner {
	padding: 10px 0;
}

ul.primary-menu {
	list-style: none;
	margin-left: 0px;
	display: flex;
	align-items: center;
}

.primary-menu li {
	line-height: 1.5;
	margin: 0;
}

.primary-menu>li:not(.cn)>a {
	padding: 10px 27px;
	text-decoration: none;
	color: var(--black) !important;
	font-size: 15px;
}


.primary-menu li:not(.cn).current-menu-item>a,
.primary-menu li.current-menu-item>.link-icon-wrapper>a,
.primary-menu li:not(.cn):hover>a {
	text-decoration: none;
	color: var(--yel) !important;
}

.primary-menu li.cn a {
	font-size: 15px !important;
	color: var(--black) !important;
	background-color: var(--yel);
	color: var(--black);
	text-decoration: none;
	padding: 10px 35px;
	margin-left: 30px;
	border-radius: 50px;
}

/* footer */
#site-footers {
	background-color: #1a1919;
}

.footer-inner {
	padding-block: 40px;
}

.grid-ft {
	display: grid;
	grid-template-columns: 1fr 0.8fr 0.8fr 1fr;
	gap: 30px;
}

.grid-ft :is(.widget-title, .ftr-title) {
	font-size: 20px;
	color: var(--yel);
	margin-bottom: 20px;
	font-weight: 600;
}

.grid-ft .widget_nav_menu a {
	font-weight: normal;
	text-decoration: none;
	font-size: 16px;
	color: var(--wht);
}

.footer-credit {
	padding: 14px;
	border-top: 1px solid #525252;
}

.headicons-c {
	color: var(--wht);
	list-style: none;
	margin: 0 !important;
}

.headicons-c li {
	margin: 0;
}

.headicons-c li i {
	margin-right: 8px;
	color: var(--yel);
}

.headicons-c li a {
	color: var(--wht);
	text-decoration: none;
}

.headicons-c li+li {
	margin-top: 12px;
}

.headicons-ft {
	margin: 0 !important;
}

.headicons-ft li {
	margin: 0;
	display: inline-block;
}

.headicons-ft li a {
	color: var(--yel);
	padding: 0 10px;
	font-size: 20px;
	transition: all 0.3s ease;
}

.headicons-ft li:hover a {
	color: var(--wht);
}

.header-titles-wrappers {
	position: relative;
}

.toggle-icon .open-svg,
.nav-toggle .toggle-icon {
	color: var(--yel);
	width: 30px;
	height: 30px;
}

.nav-toggle {
	top: -20px;
}

/* Banner */
.home-banner-slider {
	background-color: var(--yel);
}

.slider-item {
	position: relative;
}

.image-container {
	position: absolute;
	z-index: 1;
	inset: 0;
}

.image-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.image-container {
	border-radius: 0 0 30px 30px;
	overflow: hidden;
}

.banner-content {
	position: relative;
	z-index: 2;
}

.image-container::before {
	width: 100%;
	position: absolute;
	inset: 0;
	background-image: linear-gradient(130deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0) 80%);
	content: " ";
	z-index: 1;
	transition: all 0.3s ease;
	will-change: background, filter;
}

.banner-contl {
	padding-block: clamp(60px, 9.0337rem + 9.7692vw, 700px);
	text-align: center;
	color: var(--wht);
}

.banner-conts p {
	font-size: 18px;
}

.spans {
	font-size: calc(2vw + 4rem);
	line-height: 1;
	text-transform: uppercase;
	font-weight: 800;
}

.slick-slider div {
	transition: none;
}

.home-banner-slider .slick-arrow svg {
	width: 15px;
	color: var(--wht);
	fill: var(--wht);
	transition: all 0.3s all;
}

.home-banner-slider .slick-arrow svg {
	width: 15px;
	color: var(--wht);
	fill: var(--wht);
	transition: all 0.3s all;
}

.home-banner-slider .slick-prev.slick-arrow {
	left: 14px;
}

.home-banner-slider .slick-next.slick-arrow {
	right: 14px;
}

.home-banner-slider .slick-arrow:hover svg {
	color: var(--hv-yel);
}

.home-banner-slider .slick-arrow {
	position: absolute;
	z-index: 1;
	width: 49px;
	height: 49px;
	border-radius: 50%;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.5);
	top: 50%;
	transform: translatey(-50%);
	cursor: pointer;
	transition: all 0.3s all;
	border: 1px solid #8c8c8c;
}

/** Text Animation **/

@-webkit-keyframes fadeInUpSD {
	0% {
		opacity: 0;
		-webkit-transform: translateY(100px);
		transform: translateY(100px);
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@keyframes fadeInUpSD {
	0% {
		opacity: 0;
		-webkit-transform: translateY(100px);
		transform: translateY(100px);
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

.home-banner-slider .slick-current .slider-texts {
	animation-name: fadeInUpSD;
	animation-duration: 1s;
	opacity: 1;
	/* 	padding: 10px 20px 30px 0; */
}

button:not(.mobile-nav-toggle, .close-nav-toggle, .pswp__button, .nfancybox-button, .s-btn, .fancybox-button),
.button,
#loadMore,
.alt-btn a,
.faux-button,
.wp-block-button__link,
.wp-block-file .wp-block-file__button,
.al-btn,
.wp-block-button__link,
.wp-block-file .wp-block-file__button,
input[type="button"],
input[type="reset"],
input[type="submit"]:not(.s-btn),
a.showcoupon,
.showlogin {
	box-shadow: 0 0 0 3em var(--yel) inset !important;
	color: var(--black) !important;
	padding: 14px 40px;
	text-transform: capitalize;
	cursor: pointer;
	border-radius: 25px;
	-webkit-transition: all 600ms ease;
	-moz-transition: all 600ms ease;
	transition: all 400ms ease;
	font-size: 16px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	font-family: var(--kan), sans-serif !important;
	display: inline-block;
	line-height: 1.2;
}

body button:not(.mobile-nav-toggle, .close-nav-toggle, .fancybox-button):hover,
.alt-btn a:hover,
body .button:hover,
.faux-button:hover,
.wp-block-button__link:hover,
.wp-block-file .wp-block-file__button:hover,
button:not(.mobile-nav-toggle, .close-nav-toggle, .sub-menu-toggle, .pswp__button, .fancybox-button):hover,
.al-btn:hover,
.wp-block-button__link:hover,
.wp-block-file .wp-block-file__button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:not(.s-btn):hover,
a.showcoupon:hover,
.showlogin:hover {
	box-shadow: 0 0 0 2px var(--yel) inset !important;
	color: var(--black) !important;
	background-color: #fff;
}

.alt-btn.wt a {
	box-shadow: 0 0 0 3em var(--wht) inset !important;
}

.alt-btn.wt a:hover {
	box-shadow: 0 0 0 2px var(--wht) inset !important;
	background-color: var(--yel);
}

/* Services */
.services-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
}

.services-list .service-item {
	position: relative;
	border-radius: 30px;
	overflow: hidden;
}

.services-list .service-item:first-child {
	grid-row: 1 / 3;
}

.service-title {
	margin-bottom: 0px;
	position: absolute;
	bottom: 70px;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 3;
	text-transform: capitalize;
}

.service-thumbnail {
	position: relative;
	height: 100% !important;
}

.service-thumbnail * {
	height: 100% !important;
	display: block;
}

.service-thumbnail a::before {
	width: 100%;
	position: absolute;
	inset: 0;
	background-image: linear-gradient(180deg, rgb(205 205 205 / 52%) 0%, rgb(0 0 0 / 51%) 60%);
	content: " ";
	z-index: 1;
	transition: all 0.3s ease;
	will-change: background, filter;
}

/* contact */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.sent .wpcf7-response-output {
	background: var(--yel);
	color: var(--wht);
	border: none;
	padding: 7px 10px;
	margin-top: 10px !important;
	margin-left: 0px;
	font-size: 13px;
	margin-bottom: 10px !important;
}

.wpcf7-form-control-wrap input[type=text],
input[type=email],
input[password],
input[type=text],
input[type=url],
input[type=tel],
textarea,
.wpcf7-select {
	background-color: var(--wht);
	padding: 13px 15px !important;
	border: 1px solid #b3b3b3 !important;
	border-radius: 1px;
	width: 100% !important;
	outline: none;
	font-family: var(--rbt) !important;
	font-size: 14px;
	color: var(--blck);
	border-radius: 19px;
}

:is(.wpcf7-form-control-wrap input[type=text], input[type=email], input[password], input[type=text], input[type=url], input[type=tel], textarea, .wpcf7-select):focus {
	border: 1px solid var(--yel) !important;

}

input[type=email].sub-em:focus {
	border: none !important;
}

.forms-row {
	grid-template-columns: repeat(auto-fit, minmax(213px, 1fr));
	display: grid;
	gap: 15px;
}

.forms-row+.forms-row,
.form-msg {
	margin-top: 15px;
}

.forms-row p {
	margin: 0;
}

:focus-visible {
	outline: none;
}

.txt-center p {
	text-align: center;
}

span.wpcf7-spinner {
	display: block;
	margin: 0 auto;
}

.iconlist .elementor-icon-list-icon {
	padding: 10px;
	border: 1px solid var(--ass);
	place-items: center;
	text-align: center !important;
	margin-right: 10px;
	min-width:46px;
}

.iconlist .elementor-icon-list-icon svg {
	margin: 0 !important;
}

/* Testimonials */
.testimonials-sliders .slick-track{
	display: grid;
    grid-auto-flow: column;
    margin: 20px 0;
}
.test-items {
	padding: 25px;
	background-color: var(--wht);
	border-radius: 20px;
	margin: 12px;
	position: relative;
	padding-top: 35px;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.test-stars {
	background: url(images/star.jpg) no-repeat center;
	background-size: cover;
	width: 116px;
	height: 16px;
	margin: 20px 0;
}

.testimonial-wraps::before {
	background: url(images/quote.png) no-repeat center;
	background-size: cover;
	width: 36px;
	height: 23px;
	margin: 0;
	content: " ";
	display: inline-block;
	position: absolute;
	top: -10px;
	z-index: 3;
}

.client-names {
	font-size: 25px;
}

.slider-b .slick-arrow svg {
	width: 15px;
	color: var(--wht);
	fill: var(--wht);
	transition: all 0.3s all;
}

.slider-b .slick-arrow svg {
	width: 12px;
	color: var(--wht);
	fill: var(--wht);
	transition: all 0.3s all;
}

.slider-b .slick-prev.slick-arrow {
	left: -20px;
}

.slider-b .slick-next.slick-arrow {
	right: -20px;
}

.slider-b .slick-arrow:hover svg {
	color: var(--hv-yel);
}

.slider-b .slick-arrow {
	position: absolute;
	z-index: 1;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: rgb(0 0 0 / 34%);
	top: 50%;
	transform: translatey(-50%);
	cursor: pointer;
	transition: all 0.3s ease;
	border: 1px solid #8c8c8c;
}

/* Posts */
.hm .post-nav {
	display: none;
}

.custom-post-content {
	background: var(--wht);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.n-list.s {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	display: grid;
	gap: 15px;
}

.content-wrap {
	padding: 25px 20px;
}

.custom-post-contents {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: column-reverse;
    text-align: center;
    gap: 11px;
}

.custom-post-title a {
	color: var(--black);
	font-size: 22px;
	display:block;
	line-height:1.1;
}

.po-excerpt {
	margin-bottom: 22px;
}

.custom-post-thumbnail img {
	border: none;
	border-radius: 0;
	box-shadow: none;
	height: auto;
	max-width: 100%;
	height: 280px !important;
	object-fit: cover;
}

/* Inner-pages */
.innerBanner {
	position: relative;
	text-align: center;
	overflow: hidden;
}

.innerBanner img {
	height: 380px;
}

.ban-title {
	font-size: min(3.6vw + 3.2rem, 60px);
	color: var(--wht);
	margin-bottom: 20px;
	text-transform: capitalize;
	text-wrap: balance;
}

.Bannercont {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	z-index: 2;
}

.breadcrumbs {
	margin: 0;
	list-style: none;
}

.breadcrumbs li {
	margin: 0;
	display: inline-block;
	font-weight: 400;
	color: var(--wht);

}

.breadcrumbs li a {
	color: var(--yel);
	text-decoration: none;
}

.breadcrumbs li i {
	color: var(--yel);
	margin: 5px 8px;
}

.ban-image {
	position: relative;
}

.ban-image::after {
	width: 100%;
	inset: 0;
	background-image: linear-gradient(130deg, rgba(0, 0, 0, 0.52) 0%, rgb(0 0 0 / 33%) 70%);
	content: "";
	z-index: 1;
	transition: all 0.3s ease;
	will-change: background, filter;
	content: " ";
	position: absolute;
}

/* Fancy box */
.location-gallery {
	column-count: 4;
	/*     columns: 300px; */
}

.location-gallery li {
	display: none;
	list-style: none;
	margin: 0;
}

.location-gallery a {
	display: inline-block;
	margin: 10px 5px;
	border-radius: 10px;
	overflow: hidden;
}

/* Posts */
.recent-athor-meta p * {
	color: var(--blck) !important;
	font-weight: 500 !important list-style:none;
}

.recent-athor-meta p svg {
	width: 24px;
	color: var(--yel) !important;
	fill: var(--yel);
	display: inline-block;
	position: relative;
	top: 5px;
	margin-right: 10px
}

.recent-athor-meta {
	margin-bottom: 35px !important
}

.recent-athor-meta p {
	display: inline-block;
	margin-right: 10px;
	margin-bottom: 0 !important
}

.posts-title {
	font-size: 35px;
	margin: 20px 0 22px !important;
	text-transform: capitalize
}

.comment-reply-title {
	font-size: 26px !important;
	text-align: left !important;
	color: var(--yel);
	padding-top: 30px;
	margin-bottom: 20px
}

p.comment-form-comment {
	margin-top: 20px
}
.comment-respond p:not(.comment-notes) {
    max-width: 100%;
}
.comment-notes,
.logged-in-as {
	text-align: left !important
}

.post-alignment {
	display: flex;
	justify-content: space-between;
	margin-top: 40px;
	margin-bottom: 10px;
	font-family: var(--kan), sans-serif !important
}

.prev-posts a div {
	display: flex;
	align-items: center
}
.section-inner.small,.section-inner.thin,.comment-content  p {
    max-width: 100% !important;
	font-family: var(--kan), sans-serif !important;
}
.comment-respond p:not(.comment-notes),
.section-inner.thin, {
	max-width: 100% !important;
	font-size: 15px;
}
.comment-body {
    position: relative;
    left: 80px;
}
form#commentform {
	margin-top: 40px !important;
	display: inline-block;
}
.comment-reply-link {
    background-color: var(--yel) !important;
    color: var(--blck) !important;
}
.blogPostnSection :is(h2, h3, h4, h5) {
	font-size: 25px;
}

/* Responsive */
@media (max-width: 1000px) {
	.grid-ft {
		grid-template-columns: repeat(3, 1fr);
	}

	.location-gallery {
		column-count: 3;
	}
}

@media (max-width: 767px) {
	.services-list {
		grid-template-columns: repeat(1, 1fr);
	}

	.location-gallery {
		column-count: 2;
	}

	.grid-ft {
		grid-template-columns: repeat(2, 1fr);
	}

	.home-banner-slider .slick-arrow {
		width: 39px;
		height: 39px;
		top: 80%;
	}

	.spans {
		font-size: calc(2vw + 3rem);
	}

	.sub-h {
		font-size: 18px;
	}

	.headicons-c li {
		font-size: 13px;
	}

	.headicons-ft li a {
		padding: 0 7px;
		font-size: 15px;
	}
}