@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100..900&display=swap');
@import "./fontello.css";
body::-webkit-scrollbar{width:.4em;height:.4em}
body::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3)}
body::-webkit-scrollbar-thumb{background-color:#32485e;outline:0}
div::-webkit-scrollbar{width:.4em;height:.4em}
div::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3)}
div::-webkit-scrollbar-thumb{background-color:#ccc;outline:1px solid #ccc}
.container{width:1440px;max-width:100%;padding: 0 15px;}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;font-family:'Roboto',sans-serif;font-weight:300;color:#333}
body{overflow-y:scroll;overflow-x:hidden}
img,iframe{max-width:100%;border:0}
.btn{border-radius:0!important}
a{color:#174578;transition:.1s all;text-decoration:none}
a:hover,a:focus,a:active{text-decoration:none!important;transition:.3s all;color:#123e68;outline:none!important}
a.btn.btn-primary{background:#b7774a;color:#fff;transition:.3s all;font-size:20px;padding:5px 25px;margin:0;border-color:#b7774a;text-transform:capitalize;font-family:'Noto Serif',sans-serif}
a.btn.btn-primary:hover{color:#b7774a;background:#fff;transform:translateY(-3px)}
#main-slider a.btn.btn-primary{font-size:26px;padding:7.5px 30px;margin:10px 10px 0}
#main-slider{font-family: 'Noto Serif','sans-serif';}
.content{padding:60px 0}
.container.content{padding:60px 15px}
.bgf6{background:#f6f6f6}
.bg-green{background:#174578}
.content h2{font-family: "Noto Serif", sans-serif;color: rgb(162 152 130);font-size: 37px;font-weight: 400;margin-bottom: 20px;}
/* .content h2+ul{font-size: 21px;font-weight: 300;}
.content h2+ul>li{margin-bottom: 5px;} */
/* .content li{list-style: disc;margin-bottom: 8px;} */
/* .content ul{padding-left: 25px;} */
.indent-2{text-indent:20px}
header{position:fixed;top:0;left:0;width:100%;z-index:1001;padding:20px 0;font-family:"Roboto",sans-serif;box-shadow:0 1px 3px rgba(0,0,0,.3);background:rgb(173 158 119)}
header.home{background-color: transparent;background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0),rgba(255,255,255,0));box-shadow:none;}
header:not(.home)+main{padding-top:91px}
header nav{display:grid;grid-template-columns:auto max-content;align-items:center;}
header nav h1{margin-bottom:3px;white-space: nowrap;}
header nav h1>a{display:inline-block;color: white;font-weight: 300;font-size: 35px;font-family: "Noto Serif";}
header nav h1>a:hover{color: white;}
header nav h1>a img{width:90px}
header nav>ul>li{display:inline-block;vertical-align:middle;padding:5px 20px;position:relative;white-space:nowrap}
header nav>ul>li>a{display:block;font-size:15px;font-weight:300;color:#fff;padding:0 0 2px;position:relative;transition:.3s all;text-transform:uppercase}
header.stick{background:rgb(173 158 119);transition:.3s all;box-shadow:0 1px 3px rgba(0,0,0,.1)!important}
header.stick nav>ul>li>a{color:#fff}
header nav>ul>li>a:after{content:'';width:0;height:1px;background:#fff;bottom:0;left:0;position:absolute}
header nav>ul>li.active>a:after,header nav>ul>li>a:hover:after{transition:.5s all;width:100%}
header nav>ul>li.sub-menu>a>span,header nav>ul>li.sub-menu>a>i{display:inline-block;vertical-align:middle}
header nav>ul>li.sub-menu:hover>a,header nav>ul>li.active>a,header nav>ul>li>a:hover{transition:.5s all;color:#fff;}
header nav>ul>li.active>a{font-weight: 400;}
header nav>ul>li>a:hover{color:#fff;transition:.3s color}
header nav>ul>li.sub-menu>ul{display:block;position:absolute;top:300px;left:0;width:200px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);padding:15px 0;transition:0 all;overflow:hidden;opacity:1;height:0;width:0;overflow:hidden}
header nav>ul>li.sub-menu>ul>li{display:block;padding:0 15px}
header nav>ul>li.sub-menu>ul>li>a{display:block;padding:5px;font-size:18px;color:#174578;font-weight:700;border-bottom:1px solid rgba(0,0,0,.05);text-transform:capitalize}
/* header nav>ul>li.sub-menu>ul>li:last-child>a{border-bottom-color:transparent} */
header nav>ul>li.sub-menu>ul>li>a:hover,header nav>ul>li.sub-menu>ul>li>a:focus,header nav>ul>li.sub-menu>ul>li>a:active{color:#fff;transition:.3s all}
#main-slider .carousel-item>div.bgimage{background-size:cover;height:100vh;width:100%;background-repeat:no-repeat;background-position:center center}
#main-slider .carousel-item>div img{display:none}
#main-slider .carousel-item:after{content:'';width:100%;background:rgba(0,0,0,.1);height:100%;position:absolute;top:0;left:0;z-index:2}
#main-slider .carousel-item a.btn.btn-outline-secondary{border-color:#174578;color:#174578;font-size:24px;padding:7.5px 30px;margin:10px 10px 0;background:#fff}
#main-slider .carousel-item a.btn.btn-outline-secondary:hover{background:#174578;color:#fff;transition:.3s all;transform:translateY(-3px)}
.carousel-fade .carousel-item{text-align:center}
.carousel-caption{bottom:0;right:0;left:0;padding:0 30px 80px;z-index:3;transition:.3s all;display:grid;align-items:center;text-align: left;width:100%;position: absolute;text-align: right;}
.carousel-caption p{font-size:23px;font-family: "Noto Sans Thai", 'sans-serif';font-weight: 300;color: rgba(255,255,255,.8);line-height: 44px;font-weight: 200;letter-spacing: 1px;display: inline-block;text-align: left;}
.img-parallax{background-attachment:fixed;background-size:cover;background-position:center center;aspect-ratio: 9/3;}

.news a{display:block;position:relative;overflow:hidden;}
.news h3{font-size: 22px;color: #111;font-family: "Noto Sans Thai",'Noto Serif',sans-serif;font-weight: 400;margin-bottom: 0;margin-top: 10px;}
.news .news-image { background-size: cover; background-position: center center; width: 100%; aspect-ratio: 16 / 10; display: block; position: relative; overflow: hidden; transition: .1s all;transform: scale(1);transform-origin: bottom;}
.news .news-image:hover { transform: scale(1.1);transform-origin: bottom;transition: .3s all; }
.news>div{margin-bottom: 15px;}

.custom-tab li{display: inline-block;}
.custom-tab li>a{font-size: 41px;color: rgb(163 153 128);display: block;padding: 5px 20px;font-weight: 400;font-family: "Noto Serif",sans-serif;}
.custom-tab li.active>a{background: rgb(240 240 240);}

.page-details{padding: 50px 0 0;min-height: 81vh;font-family: "Noto Sans Thai", "Noto Serif", serif;font-weight: 400;}
.page-details h1{font-size: 41px;font-weight: 400;font-family: "Noto Serif",sans-serif;color: rgb(163,153,128);text-align: center;}
.details{font-size: 18px;line-height: 30px;font-family: "Noto Sans Thai", "Noto Serif", serif;font-weight: normal;}
.details li{margin-bottom: 10px;}


.job-item p{font-size: 25px;font-weight: 400;padding-top: 30px;}
.job-item ul>li{font-size: 17px;font-weight: 300;margin-bottom: 5px;}
.job-item>div:last-child{margin-top: 10px;border-bottom: 1px solid #999;text-align: right;}
.job-item>div:last-child a{display: inline-block;font-size: 21px;padding:10px;color: black;transition: .1s all;}
.job-item>div:last-child a:hover{background: rgb(173 158 119);color: white;transition: .3s all;}

#contact-us{background-color:rgb(245 245 245);padding:30px}
#contact-us form{display:flex;flex-direction:column}
#contact-us label{margin-top:15px;font-weight:700;color:#555}
#contact-us label>em{color:red}
#contact-us input,#contact-us textarea{padding:12px;margin-top:5px;border:1px solid transparent;border-radius:0;font-size:16px;width:100%;box-sizing:border-box;transition:border-color .3s ease}
#contact-us textarea{height:120px;resize:vertical}
#contact-us input:focus,#contact-us textarea:focus{border-color:#007BFF;outline:none}
#contact-us button{padding:15px;background-color:rgb(173 158 119);color:#fff;border:none;border-radius:4px;font-size:16px;cursor:pointer;margin-top:20px;transition:background-color .3s ease;font-size:20px;font-weight:300;letter-spacing:1px}
#contact-us button:hover{background-color:#0056b3}
#contact-us .error{color:red;font-size:14px;margin-top:5px}

#contact-details>div{font-size:20px;padding-left:30px}
#contact-details>div p{margin-bottom:5px;}
#contact-details>div a{color: #000;}
#contact-details>div a:hover{text-decoration: underline !important;}

footer{background: rgb(173 158 119);padding: 20px 0;}
footer div>p{text-align: center;color: white;font-size: 19px;margin-bottom: 5px;}
footer #copyrights{font-size: 13px;margin-bottom: 0;}
footer div>p>a{color: inherit;transition: .1s all;}
footer div>p>a:active,footer div>p>a:focus,footer div>p>a:hover{text-decoration: underline !important;transition: .3s all;color: white !important;}
header #menu-bars{display: none;}

#social-footer{display: flex;gap: 20px;justify-content: center;}
.article-images{padding:10px}
.article-images img{display: block;width: 100%;margin-bottom: 15px;}
.article-images h3{display: block;font-size:20px;margin-bottom: 5px;}
.article-images p{font-size: 18px;margin:0;color: #999;font-weight: 400;}
.article-images a:hover{color: #387fcc;}
.slick-dots {padding: 20px 0 30px;margin: 0;text-align: center;}
.article-images p:last-of-type{margin-top: 10px;}
.slick-dots li button{color: transparent;width:15px;height: 15px;border-radius: 15px;background: #eee;border: 0;}
.slick-dots li button:hover,.slick-dots li button:active,.slick-dots li.slick-active button{background: #ad9e77;}
.slick-dots li{display: inline-block;text-align: center;margin: 0 5px;}



.carousel-caption{display: block;}
@media (max-width: 1199px){
	header nav>ul>li{padding:5px 12px}
}

@media(max-width:1023px){
	header:not(.home) + main{padding-top: 54px;}
	.md-mb10{margin-bottom: 10px;}
	.md-mb15{margin-bottom: 15px;}
	.md-mb30{margin-bottom: 30px;}
	header{padding:7.5px 0}
	header nav h1 > a{font-size: 30px;}
	header nav{display: block;}
	header:not(.active) nav>ul{display: none;}
	header nav>ul{padding-bottom: 30px;}
	header nav>ul>li{display: block;}
	header.active nav h1{margin-bottom: 30px;}
	header #menu-bars{display: inline-block;position: absolute;top:13px;right:15px;font-size: 20px;color: white;}
	header.active #menu-bars i:before{content:"\f4c8"}

	#architectural{padding: 30px 15px;}
	.news h3{font-size: 18px;}
	.carousel-caption p{font-size: 20px;line-height: 34px;}
	.content h2{font-size: 34px;}
	.content h2 + ul{font-size: 18px;}
	footer div > p{font-size: 17px;}

	.custom-tab li > a{font-size: 34px;}
	.page-details{font-size: 16px;padding-bottom: 50px;}
	.page-details h1{font-size: 34px;}

	#contact-details>div{padding: 30px 0 0}
	#contact-details>div p{font-size: 16px;}
	#map-iframe{height: 340px;}
}

@media (max-width:767px) {
	.page-details{padding-top: 40px;}
	.carousel-caption{padding: 0 20px 50px;}
	.carousel-caption p{color: white;}
	.container content{padding: 45px 15px;}
#social-footer{display: block}
	.page-details .custom-tab{display: flex;}
	.custom-tab li > a{font-size: 28px;white-space: nowrap;}
	#contact-us input, #contact-us textarea{padding: 10px;}
	#contact-us label{font-size: 15px;}
}