:root{
      --orange:#f26522;
      --orange2:#f79c1c; 
      --dark:#202020;
      --muted:#6e7478;
      --line:#e9e9e9;
      --soft:#fff8f3;
      --green:#254d3d;
    }
.orangefilter{filter: invert(44%) sepia(73%) saturate(869%) hue-rotate(342deg) brightness(95%) contrast(99%);}
/* HERO */
.bannerservices{
	position:relative;
	min-height:465px;
	overflow:hidden;
	background:url("../images/bannerservicepage.png") top left -13rem no-repeat;
	background-size: cover !important;
}
.bannerservices .container{
  position:relative;
  z-index:2;
  padding-top:78px;
  padding-bottom:55px;
}
.hero-copy{max-width:570px;}
.kicker{
  color:var(--orange);
  font-size:18px;
  font-weight:500;
  letter-spacing:1.2px;
  text-transform:uppercase;
  margin-bottom:0px;
}
.bannerservices h1{
	font-size:47px;
	line-height:1.12;
	font-weight:600;
	margin:0 0 13px;
	color:#252525;
	font-family: 'THSarabunBold';
}
.bannerservices h1 span{color:var(--orange);}
.bannerservices p {
    color: #666;
    font-size: 20px;
    max-width: 510px;
    margin-bottom: 15px;
}
.btn-orange{
  background:var(--orange);
  border:1px solid var(--orange);
  color:#fff !important;
  border-radius:28px;
  padding: 8px 22px;
  font-size:16px;
	transition: all 0.5s;
  box-shadow:0 7px 16px rgba(243,107,33,.18);
}
.btn-orange img{
	max-width: 20px;
	margin-left: 5px;
	filter: brightness(0) invert(1);
}
.btn-outline-orange img{
	max-width: 20px;
	margin-left: 5px;
}
.btn-outline-orange{
  color:var(--orange) !important;
  background:#fff;
  border:1px solid #f1b18c;
  border-radius:28px;
  padding: 8px 22px;
  font-size:16px;
  margin-left:8px;
	transition: all 0.5s;
}
.btn-orange:hover,
.btn-outline-orange:hover{transform: scale(.97);}
.trust-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:30px;
  margin-top:29px;
}
.trust-item{
  display:flex;
  align-items:center;
  color:#555;
   font-size:14px;
}
.trust-item .trust-icon{
  color:var(--orange);
  font-size:25px;
  margin-right:9px;
}
.trust-item .trust-icon img{
	max-width: 25px;
}
.trust-item strong{
	display:block;
	color:#333;
	font-size:22px;
	line-height:1.1;
	font-family: 'THSarabunBold';
}

/* GENERAL */
.section{padding:55px 0;}
.section-soft{
  background:linear-gradient(180deg,#fff8f4,#fffdfb);
  border-radius:28px;
}
.section-title{
  text-align:center;
  margin-bottom:30px;
}
.section-title h1{
	font-size:47px;
	font-weight:600;
	margin-bottom:4px;
	color:#252525;
	font-family: 'THSarabunBold';
}
.section-title span{
	font-size: 18px;
	letter-spacing: 1.2px;
	color:var(--orange);
}
.section-title p{
	margin:0;
	color:#777; 
	font-size:16px;
}
.section-title.left{text-align:left;}
.section-title.left h1{margin-bottom:0;}

/* SERVICE TYPES */
.service-types{
	margin: 2rem auto 3rem;
}
.type-card{
	background:#fff;
	border:1px solid #eee;
	border-radius:10px;
	overflow:hidden;
	height:100%;
	margin: 0 -10px;
	box-shadow:0 2px 10px rgba(0,0,0,.025);
	transition: all .25s;
}
.type-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 30px rgba(0,0,0,.08);
}
.type-img{
	text-align: center;
	overflow: hidden;
	aspect-ratio:3/2;
}
.type-img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.6s;
}
.type-body{padding:17px 19px 19px;}
.type-icon{
	width:65px;
	height:65px;
	border-radius:50%;
	padding: 10px;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--orange);
	background: #fcebe1;
	border:1px solid #FFF;
	margin-top:-41px;
	position:relative;
	box-shadow:0 4px 10px rgba(0,0,0,.07);
}
.type-icon img{max-width: 100%;}
.type-body h3{
	font-size:24px;
	margin:9px 0 4px;
	font-family: 'THSarabunBold';
}
.type-body a img{max-width: 20px;margin-left: 5px;}
.type-body p{
	color:#777;
	font-size: 16px;
	margin-bottom:8px;
	line-height:1.55;
}
.more{
	color:var(--orange);
	font-size:18px;
}

/* PORTFOLIO */
.portfolio-card{
	border:1px solid #e9e9e9;
	border-radius:6px;
	overflow:hidden;
	background:#fff;
	height:100%;
	margin: 0 -8px;
	box-shadow:0 2px 7px rgba(0,0,0,.02);
}
.portfolio-img{
	text-align: center;
	overflow: hidden;
	aspect-ratio: 4/3;
}
.portfolio-img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.6s;
}
.portfolio-card:hover img{transform: scale(1.03);}
.portfolio-info{padding:10px 13px 12px;}
.portfolio-info h4{
	font-size:22px;
	margin:0 0 2px;
	font-family: 'THSarabunBold';
}
.portfolio-info small{
	color:#777;
	font-size: 15px;
}
.portfolio-info img{
	width: 15px;
	margin-right: 5px;
}

/* SERVICES GRID */
.service-grid .service-box{
  height:100%;
  min-height:175px;
  padding:1rem;
  border:1px solid #e8e8e8;
  border-radius:8px;
  background:#fff;
  position:relative;
  transition:.25s;
}
.service-grid .service-box:hover{
  border-color:#f2c5ab;
  box-shadow:0 8px 22px rgba(0,0,0,.05);
}
.service-icon{
  font-size:27px;
  color:var(--orange);
  margin-bottom:10px;
}
.service-icon img{
	max-width: 40px;
}
.service-box h3{
	font-size:24px;
	margin:0 0 5px;
	font-family: 'THSarabunBold';
	
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    height: calc(1rem * 1.3 * 2);
}
.service-box p{
	color:#777;
	font-size:16px;
	margin-bottom:9px;
	display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    height: calc(1rem * 1.3 * 3);
}
.popular{
	position:absolute;
	left:15px; 
	top:-11px;
	background:var(--orange2);
	color:#fff;
	border-radius:12px;
	padding:2px 15px;
}
.service-box a.more img{max-width: 20px;margin-left: 5px;}

/* STEPS */
.steps-wrap{
	background:#f5f5f7;
	border-radius:25px;
	padding: 2rem 1rem;
	margin: 2rem auto;
}
.steps-wrap h2{
	font-size: 33px;
	margin: 0;
	font-family: 'THSarabunBold';
}
.steps-wrap p{
	font-size: 16px;
}
.step{
  display:flex;
  align-items:center;
  position:relative;
  min-height:105px;
}
.step:not(:last-child):after{
  content:'›';
  position:absolute;
  right:-4px;
  top:35px;
  font-size:30px;
  color:#8d8d8d;
}
.step-num{
	width:70px;height:70px;
	border-radius:50%;
	background: #fcefe9;
	border: 2px solid #ffffff;
	color:var(--orange);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:25px;
	flex:0 0 70px;
	box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.step-num img{
	max-width: 35px;
}
.step-content{padding-left:14px;}
.step-content strong{
	display:block;
	font-family: 'THSarabunBold';
	font-size:24px;
}
.step-content span{
  color:#777;
  display:block;
}

/* TESTIMONIALS */
.testimonial{
  border:1px solid #e7e7e7;
  border-radius:10px;
  padding:23px 20px 18px;
  background:#fff;
  height:100%;
	transition: all 0.5s;
}
.testimonial:hover{
	transform: scale(1.02);
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.quote {
	color:var(--orange);
    font-size: 20px;
    line-height: .6;
    transform: rotateX(180deg) rotateY(180deg) translateX(93%);
}
.testimonial p{
	min-height:65px;
	margin:.5rem 0 0;
	line-height: normal;
}
.stars{
	color:#ffb000; 
	font-size:14px;
	letter-spacing:2px;
}
.person{
	display:flex;
	align-items:center;
	margin-top:10px;
	justify-content: flex-start;
}
.avatar{
	width:35px;
	height:35px;
	border-radius:50%;
	object-fit:cover;
	margin:0 10px 0 0;
}
.person strong{
	display:block;
	font-size: 18px;
	font-family: 'THSarabunBold';
}

/* FAQ */
.faq .card{
  border:1px solid #e8e8e8;
  border-radius:7px !important;
  margin-bottom:7px;
  overflow:hidden;
}
.faq .card-header{
  background:#fff;
  border:0;
  padding:0;
}
.faq .btn-link{
	width:100%;
	color: #000;
	font-size: 20px;
	text-align:left;
	padding: 8px 15px;
	text-decoration:none;
	position:relative;
	font-family: 'THSarabunBold';
}
.faq .btn-link:after{
  content:'+';
  position:absolute;
  right:15px;
  top:7px;
}

/* CTA */
.cta{
	margin-top: 2rem;
	background:
	linear-gradient(190deg, rgba(255, 255, 255, 0) 0%, rgb(255 178 140) 100%),
	url( "../images/bgcontent2.png") right center/cover;
	border-radius:22px;
	padding:38px 48px;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.cta h1{
	font-size:28px;
	margin:0 0 2px;
	font-family: 'THSarabunBold';
}
.cta p{
	margin:0;
}

.typewrap{
	background: #fff7f5;
	padding:2rem 1rem;
	border-radius: 20px;
}

#services.section{
	background: linear-gradient(45deg, rgba(255, 255, 255, 0) 60%, rgb(254 245 238) 100%);
}
.service-icon {
	text-align: left;
}
.service-icon   i {
    color: #f16726;
    font-size: 1.5em;
}

}

@media(max-width:1199px){
  .navbar-nav .nav-link{padding-left:9px !important;padding-right:9px !important;}
  .hero h1{font-size:42px;}
}
@media(max-width:991px){
  .navbar{height:auto;padding:10px 0;}
  .navbar-nav .nav-link{padding:9px 0 !important;}
  .nav-actions{margin:8px 0 0;}
  .hero{min-height:auto;background-position:72% center;}
  .hero .container{padding-top:55px;}
  .hero-copy{max-width:530px;}
  .step:not(:last-child):after{display:none;}
}
@media(max-width:767px){
  .section{padding:42px 0;}
  .hero h1{font-size:35px;}
  
  /*.trust-row{gap:15px;}*/
  .btn-outline-orange{margin-left:0;margin-top:8px;}
  .section-title h1{font-size:34px;}
  .cta{padding:30px 25px;text-align:center;}
  .cta .text-right{text-align:center !important;margin-top:18px;}
}
@media(min-width:768px){

	.bannerservices{
		min-width: inherit;
		height: 515px;
		padding: 10% 0 7%;
		background-position: top left -10rem;
	}
	.bannerservices .container{padding-top: 0;padding-bottom: 0;}
	.service-box h3 {line-height: 1;height: calc(1rem * 1.45 * 2);}
	.section{padding: 5% 0 3%;}
	.typewrap{padding: 2rem;}
	.portfolio-info small{font-size: 18px;}
	.section-title p,
	.steps-wrap p{font-size: 20px;}
	.section-title span{font-size: 22px;}
	.portfolio-info h4{font-size: 24px;}
	
	.btn-orange,
	.btn-outline-orange {
		padding: 5px 15px;
		font-size: 20px;
		min-width: 165px;
	}
	.step-num {
		width: 60px;
		height: 60px;
		padding: 5px;
		flex: 0 0 60px;
	}
	.step-content{padding-left: 10px;}
	.steps-wrap .btn-orange{float: right;margin: 0;}
	.section-title .btn-outline-orange{float: right;margin: 0;}

	.service-box p{
		-webkit-line-clamp: 2;
		height: calc(1rem * 1.3 * 2);
	}
}
@media(min-width:992px){
	.step-content strong{font-size: 18px;}
	.step-content span{font-size: 14px;}
	.bannerservices {
        height: 570px;
        background-position: top center;
    }
	.kicker,
	.trust-item{font-size: 22px;}
	.trust-item .trust-icon img{max-width: 35px;}
	.trust-item strong{font-size: 26px;}
	.bannerservices h1 {
		font-size: 60px;
		line-height: 1;
	}
	.typewrap {padding: 1.5rem 2rem;}
	.type-body {padding: 17px 10px 19px;}
	.section-title h1{font-size: 40px;}
}
@media(min-width:1200px){
	html{font-size: 20px;}
	.bannerservices {
		padding: 5% 0;
    }
	.bannerservices p{font-size: 26px;}
	.kicker, .trust-item{font-size: 24px;}
	.bannerservices h1{font-size: 70px;}
	.btn-orange, 
	.btn-outline-orange {
        font-size: 24px;
        min-width: 195px;
    }
	.trust-item .trust-icon img{
        max-width: 45px;
    }
	.trust-item strong {font-size: 32px;}
	.btn-outline-orange img,
	.btn-orange img{max-width: 25px;}
	.section-title h1{font-size: 48px;}
	.section-title p, .steps-wrap p{font-size: 25px;}
	.section-title span{font-size: 24px;}
	.type-body p{
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		line-height: 1.3;
		height: calc(1rem * 1.3 * 2);
	}
	.type-body p,
	.service-box .more{font-size: 20px;}
	.service-box p{font-size: 20px;}
	.steps-wrap h2{font-size: 40px;}
	.step-content strong { font-size: 24px;}
	.step-content span{font-size: 20px;padding-right: 10px;}
	.cta h1{font-size: 33px;}
	.faq .btn-link{font-size: 22px;}
	
}
@media(min-width:1600px){
	.section{padding: 3% 0;}
	.bannerservices {
        padding: 5% 0 3%;
        margin-top: 1rem;
		height: 700px;
    }
}
@media(min-width:1830px){
	.kicker, 
	.trust-item {
        font-size: 26px;
    }
	.bannerservices h1{font-size: 75px;}
	.trust-item strong{font-size: 36px;}
}