/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Noto+Sans+Thai:wght@100..900&display=swap');

@import url('../font/NotoSansThai/stylesheet.css');


/* html5doctor.com/html-5-reset-stylesheet/ */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,time,mark,audio,video { margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; } 
body { line-height:1; }
ol,ul { list-style:none; }
blockquote,q { quotes:none; }
blockquote:before,blockquote:after,q:before,q:after { content:'';content:none; }
ins { text-decoration:none; }
del { text-decoration:line-through; }
table { border-collapse:collapse;border-spacing:0; }



*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* box-sizing: border-box; */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* overflow-x: hidden;  */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


:root{
  --white: #fff;
  --black: #000;
  --default:#555; 
  --primary: #15aaec;
  --secondary: #096688;

  --filter-white: invert(100%) sepia(98%) saturate(6%) hue-rotate(63deg) brightness(103%) contrast(100%);
  --filter-primary: invert(54%) sepia(71%) saturate(2332%) hue-rotate(165deg) brightness(99%) contrast(86%);
  --filter-secondary: invert(16%) sepia(98%) saturate(2891%) hue-rotate(181deg) brightness(99%) contrast(93%);

  --font-Bebas_Neue: "Bebas Neue", "NotoSansThai-SemiBold", sans-serif;

  --txt-menu: 18px;
  --txt-title: 65px;
}
@media (max-width: 1599px) {
  :root {
    --txt-menu: 18px;
    --txt-title: 70px;
  }
}
@media (max-width: 1300px) {
  :root {
    --txt-menu: 17px;
  }
}
@media (max-width: 1199px) {
  :root {
    --txt-menu: 16px;
    --txt-title: 60px;
  }
}
@media (max-width: 991px) {
  :root {
    --txt-menu: 18px;
    --txt-title: 50px;
  }
}
@media (max-width: 576px) {
  :root {
    --txt-title: 40px;
  }
}



/* -- CUSTOM CSS -- */
html, body {width:100%; height:100%; padding:0px; margin:0px}

body{ 
	background-color:#fff; 
}
body{ font-family: "Noto Sans Thai", sans-serif; font-size:100%; font-weight:400; color:var(--default); text-decoration:none; }
img {
	border:0px;
}
.img-responsive { display: block; height: auto; max-width: 100%; }
.img-fluid { max-width: 100%; height: auto; }
strong{ font-weight: 500; }
strong:lang(th){ font-weight: bold; }
a,
a:hover{
  text-decoration:none;
  color: inherit;
  outline:0; transition: all 0.3s ease;
}
a:focus {
  text-decoration:none;
  outline:0;
}
button{ border: 0; cursor: pointer; background: transparent; padding: 0; margin: 0; }
.btn.focus, .btn:focus{
	outline:0;
	box-shadow: none;
}
input:focus,
select:focus,
textarea:focus,
button:focus,
.form-control:focus {
  outline: none !important;
  box-shadow: none;
}
input,
select,
textarea{
  background-clip: padding-box;
}






.div-container--fluid{ width: 100%; position: relative; margin: 0 auto; }


.div-container{
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .div-container{
    max-width: 540px;
    padding-right: 15px;
    padding-left: 15px;
  }
}

@media (min-width: 768px) {
  .div-container, .div-container--fluid{
    max-width: 750px;
  }
  .div-container--fluid{ max-width: 100%; padding: 0; }
}

@media (min-width: 992px) {
  .div-container{
    max-width: 970px;
  }
}

@media (min-width: 1200px) {
  .div-container {
    max-width: 1230px;
  }
}
@media (min-width: 1600px) {
  .div-container {
    max-width: 1470px;
  }
}


/**********************************************************/
/************************** nav ***************************/
/**********************************************************/

.div-nav{ position: absolute; width: 100%; top: 0; left: 0; z-index: 9999; padding: 35px 0 0 0; }
.nav-container{ display: flex; justify-content: space-between; align-items: center; max-width: 1600px; width: 90%; margin: 0 auto; position: relative; }
.nav-logo{ max-width: 300px; line-height: 0; }
.nav-menu{ display: flex; align-items: center; padding-right: 50px; }
.nav-menu ul{ display: flex; justify-content: center; align-items: center; gap: 30px; }
.nav-menu ul li{ display: inline-block; }
.nav-menu ul li:first-child{ padding-left: 0; }
.nav-menu ul li:last-child{ padding-right: 0; }
.nav-menu ul li a{ display: block; font-size: var(--txt-menu); color: var(--white); font-weight: 400; position: relative; }
.nav-menu ul li a::before{ content: ''; position: absolute; bottom: -4px; right: 0; left: 0; height: 1px; background-color: #5fceff; transform: scaleX(0) translateZ(0); transform-origin: 100% 50%; transition: transform .6s cubic-bezier(.37,.31,0,1); }
.nav-menu ul li a:hover::before{ transform: scaleX(1) translateZ(0); transform-origin: 0 50%; }
.nav-menu ul li a:hover, .nav-menu ul li a.active{ color: #5fceff; }

.nav-menu ul li.current_page_parent a,
.nav-menu ul li.current-menu-item a{ color: #5fceff; }
.nav-menu ul li.current_page_parent a::before,
.nav-menu ul li.current-menu-item a::before,
.nav-menu ul li.menu-item-has-children:hover > a::before{ transform: scaleX(1) translateZ(0); transform-origin: 0 50%; }


.nav-lang{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); border-left: 1px solid #fff; padding-left: 10px; }
.nav-lang a{ font-size: var(--txt-menu); color: var(--white); font-weight: 400; }
.nav-lang a:hover{ color: #5fceff; }
.nav-lang img{ width: 30px; }


.nav-menu ul li.menu-item-has-children > ul,
.nav-menu ul li.subb > ul{ display: none; position: absolute; background-color: #41819c; min-width: 180px; top: 51px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }

.nav-menu ul li.menu-item-has-children:hover > ul,
.nav-menu ul li.subb:hover > ul{ display: block; z-index: 9; }
.nav-menu ul li.menu-item-has-children > ul li,
.nav-menu ul li.subb > ul li{ display: block; position: relative; }
.nav-menu ul li.menu-item-has-children > ul li a,
.nav-menu ul li.subb > ul li a{ display: block; padding: 15px; border-bottom: 1px solid #006184; font-size: 15px; }
.nav-menu ul li.menu-item-has-children > ul li:last-of-type a,
.nav-menu ul li.subb > ul li:last-of-type a{ border-bottom: 0; }
.nav-menu ul li.menu-item-has-children > ul li a:active,
.nav-menu ul li.menu-item-has-children > ul li a:hover,
.nav-menu ul li.subb > ul li a:active,
.nav-menu ul li.subb > ul li a:hover{ background-color: #f3f3f3; color: var(--secondary); }
.nav-menu ul li.subb > ul li a::before{ display: none; }

.subbhead{ display: flex; align-items: center; gap: 5px; }
.arrow-down img{ width: 16px; filter: var(--filter-white); }


.scrolDisabled{
  overflow: hidden;
  /* position: fixed; */
}


@media (max-width: 1599px){

  .nav-logo{ max-width: 250px; }
  .nav-menu ul li.subb > ul{ top: 45px; }

}
@media (max-width: 1300px){

  .nav-logo{ max-width: 200px; }
  .nav-menu ul li.subb > ul{ top: 38px; }

}
@media (max-width: 991px){

  .nav-logo{ max-width: 140px; margin: 0 auto; }

  .div-nav{
    position: fixed; width: 100%; display: block; 
    z-index: 999; padding: 10px 0; top: 0; background-color: var(--secondary);
  }
  .div-nav.navOpen{ height: 100%; background-color: var(--secondary); }
  .div-nav.navOpen .nav-container{ flex-direction: column; }

  .nav-menu{ display: none; }
  .nav-menu.navOpen{ display: block; width: 100%; height: 100%; margin-top: 50px; padding: 0 15px; z-index: 999; }
  .nav-menu.navOpen ul{ display: flex; flex-direction: column; }
  .nav-menu.navOpen ul li{ display: block; padding: 0; width: 100%; }
  .nav-menu.navOpen ul li a{ display: inline-block; }


  .nav-menu.navOpen ul li.menu-item-has-children > ul,
  .nav-menu.navOpen ul li.subb > ul{ position: relative; min-width: auto; width: 100%; margin: 0 auto; top: auto; margin-top: 15px; padding-left: 20px; background-color: transparent; }
  .nav-menu.navOpen ul li.menu-item-has-children > ul::after,
  .nav-menu.navOpen ul li.subb > ul::after{ left: 50%; transform: translateX(-50%); }
  .nav-menu.navOpen ul li.menu-item-has-children > ul li,
  .nav-menu.navOpen ul li.subb > ul li{ margin-bottom: 0; padding-left: 6px; }
  .nav-menu.navOpen ul li.menu-item-has-children > ul li::before,
  .nav-menu.navOpen ul li.subb > ul li::before{ content: '-'; position: absolute; top: 9px; left: -6px; font-size: 20px; color: #fff; }
  .nav-menu.navOpen ul li.menu-item-has-children > ul li a,
  .nav-menu.navOpen ul li.subb > ul li a{ border-bottom: 0; padding: 12px 0; }
  .nav-menu ul li.subb > ul li a:active,
  .nav-menu ul li.subb > ul li a:hover{ background-color: transparent; color: #5fceff; }

  .subbhead{ justify-content: space-between; }

  .nav-lang{ border-left: 0; top: 12px; transform: translateY(0); }

  .content-pd{ padding-top: 55px; }

  /* ============================================
     AI เขียน - Mobile Submenu Toggle Styles
     ============================================ */
  /* ซ่อน submenu ตั้งแต่แรก (override hover style) */
  .nav-menu ul li.menu-item-has-children > ul,
  .nav-menu ul li.subb > ul {
    display: none !important;
  }
  
  /* แสดง submenu เมื่อมี class submenu-active */
  .nav-menu ul li.submenu-active > ul,
  .nav-menu ul li.menu-item-has-children.submenu-active > ul {
    display: block !important;
  }
  
  /* Rotate arrow เมื่อ submenu เปิด */
  .nav-menu ul li.submenu-active .arrow-down img,
  .nav-menu ul li.menu-item-has-children.submenu-active .arrow-down img {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
  }



#nav-icon1 {
  width: 30px;
  height: 30px;
  position: fixed;
  margin: 0;
  top: 12px;
  left: 20px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  z-index: 1001;
}

#nav-icon1 span {
  display: block;
  position: absolute;
  height: 3px;
  width: 30px;
  background: var(--white);
  border-radius: 10px;
  opacity: 1;
  right: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon1 span:nth-child(1) {
  top: 5px;
}

#nav-icon1 span:nth-child(2) {
  top: 15px;
}

#nav-icon1 span:nth-child(3) {
  top: 25px;
}

#nav-icon1.open span:nth-child(1) {
  top: 15px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#nav-icon1.open span:nth-child(2) {
  opacity: 0;
  right: -30px;
}

#nav-icon1.open span:nth-child(3) {
  top: 15px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}


}



body.post-type-archive .nav-menu ul li.current-menu-item a::before,
body.single-services .nav-menu ul li.menu-item-type-post_type_archive a::before{ transform: scaleX(1) translateZ(0); transform-origin: 0 50%; }
body.post-type-archive .nav-menu ul li.current-menu-item a,
body.single-services .nav-menu ul li.menu-item-type-post_type_archive a{ 
  color: #5fceff; 
}

body.post-type-archive .nav-menu ul li.current_page_parent a,
body.single-services .nav-menu ul li.current_page_parent a{
  color: var(--white);
}
body.post-type-archive .nav-menu ul li.current_page_parent a::before,
body.single-services .nav-menu ul li.current_page_parent a::before{
  transform: scaleX(0) translateZ(0); transform-origin: 100% 50%;
}

body.post-type-archive .nav-menu ul li.current_page_parent a:hover,
body.single-services .nav-menu ul li.current_page_parent a:hover{ 
  color: #5fceff;
}
body.post-type-archive .nav-menu ul li.current_page_parent a:hover::before,
body.single-services .nav-menu ul li.current_page_parent a:hover::before{ transform: scaleX(1) translateZ(0); transform-origin: 0 50%; }




/**********************************************************/
/*********************** footer ***************************/
/**********************************************************/

.footer{ background-color: var(--secondary); }
.ft-footer{ padding-top: 50px; padding-bottom: 50px; }

.ft-logo{ max-width: 300px; }
.ft-row{ display: flex; flex-flow: row wrap; justify-content: space-between; }
.ft-row .ft-detail{ width: 22%; }
.ft-row .ft-detail:first-child{ width: 30%; }
.ft-title{ font-size: 22px; font-weight: 500; color: var(--white);  margin-bottom: 20px; margin-top: 30px; }
.ft-detail p, .ft-detail li{ font-size: 18px; line-height: 1.4; font-weight: 300; color: var(--white);  margin-bottom: 10px; }
.ft-detail p strong{ font-weight: 500; }
.ft-detail a:hover{ text-decoration: underline; }

.ft-detail ul{   
  display: grid;
  /* grid-template-columns: 1fr 1fr;  */
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column; 
  margin-left: 20px;
}
.ft-detail ul li{ position: relative; }
.ft-detail ul li::before{ content: '-'; position: absolute; top: -4px; left: -15px; font-size: 20px; }


.ft-copyright{ border-top: 1px solid rgba(255, 255, 255, 0.15); padding: 30px 0; }
.ft-copyright .copyright{ font-size: 14px; line-height: 1.4; font-weight: 300; color: var(--white); }

.copyright-row{ display: flex; justify-content: space-between; flex-flow: row wrap; }
.link-policy ul{ display: flex; align-items: center; flex-flow: row wrap; }
.link-policy li::after{ content: '|'; margin: 0 10px; color: var(--white); }
.link-policy li:last-child::after{ display: none; }
.link-policy li a{ font-size: 14px; line-height: 1.4; font-weight: 300; color: var(--white); }
.link-policy li a:hover{ text-decoration: underline; }


@media (max-width: 1599px){

  .ft-row .ft-detail{ width: 25%; }
  .ft-row .ft-detail:first-child{ width: 40%; }

}
@media (max-width: 1199px){

  .ft-title{ font-size: 20px; }
  .ft-detail p, .ft-detail li{ font-size: 16px; }

}
@media (max-width: 991px){

  .ft-logo{ max-width: 250px; }
  .ft-footer{ padding-top: 30px; padding-bottom: 30px; }
  .ft-title{  margin-top: 25px; }
  .ft-detail ul{ display: block; }
  .ft-detail p, .ft-detail li{ font-size: 15px; margin-bottom: 6px; }

  .ft-detail ul li::before{ top: -5px; }

}
@media (max-width: 767px){

  .ft-row .ft-detail,
  .ft-row .ft-detail:first-child{ width: 100%; }

  .ft-logo{ max-width: 240px; }
  .ft-title{ font-size: 18px; }
  .ft-detail p, .ft-detail li{ font-size: 14px; }
  .ft-copyright .copyright{ font-size: 12px;}

  .copyright-row{ flex-direction: column; gap: 10px; }

}


/**********************************************************/
/**********************************************************/

section{ position: relative; }
.page-section{ padding: 80px 0; }

.divtitle{ font-family: var(--font-Bebas_Neue); font-size: var(--txt-title); line-height: 1; font-weight: 400; color: var(--secondary); margin-bottom: 40px; }
.divsubtitle{ font-size: 22px; line-height: 1.2; font-weight: 300; }

.divbar--title{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 40px; }
.divtitle2{ font-size: 32px; line-height: 1.3; font-weight: 500; color: var(--secondary); }
.linkall{ font-size: 20px; line-height: 1; color: var(--secondary); border-bottom: 1px solid var(--secondary); }
.divbar-btn{ display: none; }

.title-h2{ font-family: var(--font-Bebas_Neue); font-size: 55px; line-height: 1; font-weight: 400; color: var(--secondary); margin-bottom: 30px; }


/* .divtitle:lang(th),
.title-h2:lang(th){ font-weight: 600; } */



@media (max-width: 1199px){

  .divtitle{ margin-bottom: 30px; }
  .divsubtitle{ font-size: 20px; }

  .divtitle2{ font-size: 30px; }
  .linkall{ font-size: 18px; }

  .title-h2{ font-size: 50px; }

}
@media (max-width: 991px){

  .page-section{ padding: 50px 0; }
  .divtitle{ margin-bottom: 30px; }

  .divtitle2{ font-size: 26px; }
  .divbar--title{ margin-bottom: 30px; }

}
@media (max-width: 767px){

  .divbar--title{ margin-bottom: 20px; }
  .divtitle2{ font-size: 22px; }
  .divbar-link{ display: none; }
  .divbar-btn{ display: block; margin-top: 50px; text-align: center; }

  .title-h2{ font-size: 45px; }
  
}

.bar-top{ background-color: var(--secondary); background-repeat: no-repeat; background-position: center bottom; background-size: cover; width: 100%; height: 450px; display: flex; align-items: center; }

.bg-about{ background-image: url('../images/bar/bar-about.jpg'); }
.bg-service{ background-image: url('../images/bar/bar-service.jpg'); }
.bg-news{ background-image: url('../images/bar/bar-news.jpg'); }
.bg-experience{ background-image: url('../images/bar/bar-experience.jpg'); }
.bg-contact{ background-image: url('../images/bar/bar-contact.jpg'); }


.bar--content{ padding-top: 150px; width: 100%; }
.bar--content .title{ font-family: var(--font-Bebas_Neue); font-size: var(--txt-title); font-weight: 400; color: var(--white);  }
/* .bar--content .title:lang(th){ font-weight: 600; } */

.title--breadcrumb{ display: flex; justify-content: space-between; align-items: baseline; flex-flow: row wrap; }
.nav-breadcrumb ul{ display: flex; align-items: center; flex-flow: row wrap; gap: 5px 0; }
.nav-breadcrumb ul li{ position: relative; font-size: 22px; line-height: 1.3; font-weight: 300; color: var(--white);  }
.nav-breadcrumb ul li::after{ content: '/'; position: relative; margin: 0 10px; }
.nav-breadcrumb ul li:last-child:after{ display: none; }
.nav-breadcrumb ul li a:hover{ text-decoration: underline; }

.bg-detail{ height: calc(110px + 35px) !important; }

@media (max-width: 1599px){

  .bar--content{ padding-top: 100px; }

  .nav-breadcrumb ul li{ font-size: 20px; }

  .bg-detail{ height: calc(98px + 35px) !important; }

}
@media (max-width: 1199px){

  .bar-top{ height: 350px; }

  .bg-detail{ height: calc(85px + 35px) !important; }

}
@media (max-width: 991px){

  .bar-top{ height: 300px; }
  .bar--content{ padding-top: 0; }

  .bg-detail{ height: auto !important; }

}
@media (max-width: 767px){

  .bar-top{ height: 200px; }
  .nav-breadcrumb{ width: 100%; margin-top: 10px; }
  .nav-breadcrumb ul li{ font-size: 16px; }

}


.boxbtn{ display: inline-flex; align-items: center; gap: 10px; background-color: var(--primary); border-radius: 0; padding: 15px 60px; border: 1px solid var(--primary); font-family: "Noto Sans Thai", sans-serif;  font-size: 24px; color: var(--white); position: relative; }
.boxbtn img{ filter: var(--filter-white); width: 18px; }
.boxbtn:hover{ background-color: var(--white); color: var(--primary); box-shadow: none; }
.boxbtn:hover img{ filter: var(--filter-primary); }
.boxbtn.focus, .boxbtn:focus{
	outline:0;
	box-shadow: none;
}

.btn--shadow::after{ content: ''; position: absolute; top: 0; right: 0; left: 0; bottom: 0; box-shadow: 0px 10px 20px 0px rgba(9, 102, 136, 0.4); mix-blend-mode: multiply; }


@media (max-width: 1599px){

  .boxbtn{ font-size: 20px; }
  .boxbtn img{ width: 16px; }

}
@media (max-width: 991px){

  .boxbtn{ font-size: 16px; }
  .boxbtn img{ width: 12px; }

}
@media (max-width: 576px){

  .boxbtn{ padding: 12px 50px; }

}



.bg-f7f7f7{ background-color: #f7f7f7; }
.t-fff{ color: var(--white);  }
.text-center{ text-align: center; }



/**********************************************************/
/************************* home ***************************/

.bg-home{ background-image: url('../images/home/bg-home.jpg'); height: 100vh; }


.bar--home{ text-align: center; color: var(--white);  }
.bar--home .title{ font-size: 100px; margin-bottom: 30px; }
.bar--home .title:lang(th){ line-height: 1.3; }
.bar--home .subtitle{ font-size: 30px; line-height: 1.3; font-weight: 300; margin-bottom: 30px; }

.divtext{ display: inline-block; font-size: 25px; line-height: 1; font-weight: 300; background-color: #15aaec; border-radius: 30px; padding: 14px 28px; margin-bottom: 40px; }


@media (max-width: 1599px){

  .bar--home .title{ font-size: 80px; }
  .bar--home .subtitle{ font-size: 24px; }
  .divtext{ font-size: 20px; }

}
@media (max-width: 1199px){

  .bg-home{ height: 600px; }
  .bar--home .title{ font-size: 60px; }
  .bar--home .subtitle{ font-size: 20px; }
  .divtext{ font-size: 18px; }

}
@media (max-width: 991px){

  .bar--home .title{ font-size: 50px; }
  .bar--home .subtitle{ font-size: 18px; }
  .divtext{ font-size: 16px; }

}
@media (max-width: 767px){

  .bg-home{ height: auto; padding: 50px 20px; }

}
@media (max-width: 576px){

  .bar--home .title{ font-size: 40px; }
  .bar--home .subtitle{ font-size: 14px; }
  .divtext{ font-size: 12px; }

}




/**********************************************************/
/*********************** home: about **********************/

.home--about{ overflow: hidden;}

.about-row{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative; 
}
.about-col-text{
  position: relative; z-index: 2;
  width: 100%;
  -ms-flex: 0 0 65%;
  flex: 0 0 65%;
  max-width: 65%;
}
.about-col-image{
  position: relative;
  width: 100%;
  -ms-flex: 0 0 35%;
  flex: 0 0 35%;
  max-width: 35%;
}


@media (max-width: 767px){

  .about-col-text,
  .about-col-image{ -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }

}


.about-col-text p{ font-size: 22px; line-height: 1.4; font-weight: 300; margin-bottom: 40px; }
.about-col-text p:last-child{ margin-bottom: 0; }
.about-col-text .about_head{ font-size: 32px; line-height: 1.3; font-weight: 600; color: var(--secondary); margin: 100px 0 40px; }

.divRecognized-logo{ display: flex; align-items: center; gap: 40px; margin-bottom: 40px; }
.divRecognized-logo .boximg--logo{ background-color: #f7f7f7; padding: 25px 70px; }
.divRecognized-logo .boximg--logo img{ width: 120px; }

.section-el{ position: relative; }
.img-el1{ position: absolute; left: 0; top: -250px; z-index: 1; }

@media (max-width: 1599px){

  .about-col-text p{ font-size: 20px; }
  .divRecognized-logo .boximg--logo{ padding: 20px 60px; }
  .divRecognized-logo .boximg--logo img{ width: 100px; }

}
@media (max-width: 1199px){

  .divRecognized-logo .boximg--logo{ padding: 20px 50px; }
  .divRecognized-logo .boximg--logo img{ width: 80px; }

  .img-el1{ top: -200px; }
  .img-el1 img{ width: 100px; }

}
@media (max-width: 991px){

  .about-col-text p{ font-size: 18px; }
  .about-col-text .about_head{ font-size: 28px; }
  .divRecognized-logo{ gap: 20px; }
  .divRecognized-logo .boximg--logo{ width: 30%; padding: 20px; text-align: center; }
  .divRecognized-logo .boximg--logo img{ max-width: 60px; width: 100%; }

}
@media (max-width: 767px){

  .img-el2{ margin-top: 30px; }
  .img-el2 img{ max-width: 100%; height: auto; }

  .about-col-text p, .divRecognized-logo{ margin-bottom: 30px; }
  .about-col-text .about_head{ margin: 50px 0 30px; }

  .divRecognized-logo{ gap: 15px; }
  .divRecognized-logo .boximg--logo img{ max-width: 50px; }

  .img-el1{ top: -120px; }
  .img-el1 img{ width: 60px; }

}




/**********************************************************/
/******************** home: service ***********************/

.home--service{ background-image: url('../images/home/bg-service.jpg'); background-repeat: no-repeat; background-position: center top; background-size: cover; }


.polygon-card{ background-color: #f7f7f7; margin: 20px;  }
.polygon-el{ text-align: center; }
.polygon-el img{ width: 160px; position: relative; margin-top: -95px; }
.polygon-title{ font-size: 28px; line-height: 1.2; font-weight: 600; color: #033085; text-align: center; padding-bottom: 25px; height: 93px; overflow: hidden; }

.card--doc{ position: relative; cursor: pointer; }
.polygon-card-detail{ position: absolute; top: 0; left: 20px; right: 0; width: calc(100% - 40px); height: 100%; padding: 20px; color: var(--white); visibility: hidden; opacity: 0; transition: opacity 0.3s; z-index: 9; }
.polygon-card-detail ul{ list-style: disc; padding-left: 20px; max-height: 300px; overflow-y: hidden; }
.polygon-card-detail li{ font-size: 16px; line-height: 1.4; font-weight: 300; color: var(--white);  margin-bottom: 5px; }
.card--doc:hover{ top: -20px; }
.card--doc:hover .polygon-card-detail{ visibility: visible; opacity: 1; }
.card--doc:hover .polygon-card{ box-shadow: 0px 10px 20px 0px rgba(5, 48, 126, 1); }


.polygon-title-card{ display: flex; align-items: center; margin-bottom: 20px; }
.polygon-title-card .polygon-icon{ width: 60px; }
.polygon-title-card .polygon-icon img{ width: 100%; filter: var(--filter-white); }
.polygon-title-card .polygon-title{ width: calc(100% - 60px); color: var(--white);  padding-bottom: 0; text-align: left; padding-left: 15px; height: auto; }

.polygon-link{ margin-top: 20px; }
.polygon-link a{ font-size: 20px; line-height: 1; color: var(--white);  border-bottom: 1px solid #fff; }

.polygon-hoverdetail{ position: relative; z-index: 9; }
.polygon-hoverbg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.polygon-hoverbg img{ object-fit: cover; object-position: center; width: 100%; height: 100%; }
.polygon-hoverbg::after{ content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(21, 170, 236, 0.9); }


@media (max-width: 1599px){

  .polygon-el img{ width: 120px; margin-top: -70px; }
  .polygon-title{ font-size: 22px; height: 78px; }

  .polygon-card-detail ul{ max-height: 280px; }
  .polygon-card-detail li{ font-size: 15px; }

  .polygon-title-card .polygon-icon{ width: 50px; }
  .polygon-title-card .polygon-title{ width: calc(100% - 50px); }
  .polygon-link a{ font-size: 18px; }

}
@media (max-width: 1199px){

  .polygon-el img{ width: 100px; margin-top: -60px; }
  .polygon-title{ font-size: 20px; height: 73px; }

  .polygon-card-detail{ padding: 10px; }
  .polygon-title-card{ margin-bottom: 10px; }
  .polygon-title-card .polygon-icon{ width: 40px; }
  .polygon-title-card .polygon-title{ width: calc(100% - 40px); font-size: 16px; }
  .polygon-card-detail ul{ max-height: 220px; }
  .polygon-card-detail li{ font-size: 14px; }
  .polygon-link a{ font-size: 16px; }

}
@media (max-width: 991px){

  .polygon-card{ margin: 15px; }
  .polygon-card-detail{ width: calc(100% - 30px); left: 15px; }
  .polygon-card-detail ul{ max-height: 260px; }

}
@media (max-width: 767px){

  .polygon-card-detail ul{ max-height: 200px; }

}
@media (max-width: 576px){

  .polygon-title{ font-size: 18px; height: 69px; }
  .polygon-card-detail ul{ max-height: 260px; }
  .polygon-link{ margin-top: 10px; }

}




.hexagon {
  width: 140px;
  height: 80px;
  background: #15aaec;
  position: relative; z-index: 8;
  display: flex; align-items: center; justify-content: center;
}
.hexagon::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-bottom: 40px solid #15aaec;
}
.hexagon::after {
  content: "";
  position: absolute;
  bottom: -40px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-top: 40px solid #15aaec;
}
.hexagon img{ filter: var(--filter-white); position: relative; z-index: 19; width: 100px; }


.hexagon-border {
  width: 160px;
  height: 100px;
  background: #fff;
  position: relative; 
  display: flex; align-items: center; justify-content: center;
}
.hexagon-border::before {
  content: "";
  position: absolute;
  top: -45px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
  border-bottom: 45px solid #fff;
}
.hexagon-border::after {
  content: "";
  position: absolute;
  bottom: -45px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
  border-top: 45px solid #fff;
}



/**********************************************************/
/******************** home: client ************************/

.home--client{ background-image: url('../images/home/bg-client.jpg'); background-repeat: no-repeat; background-position: left top; background-size: cover; }

.client-row{ display: flex; flex-flow: row wrap; position: relative; }
.client-left{ width: 35%; padding-right: 20px; }
.client-right{ width: 65%; }

.logo-client img{  height: auto; }

.slide--client.swiper {
  width: 100%;
  height: 480px;
  margin-left: auto;
  margin-right: auto;
}
.slide--client .swiper-wrapper{
  -webkit-transition-timing-function:linear!important;
  -o-transition-timing-function:linear!important;
  transition-timing-function:linear!important;
}
.slide--client .swiper-slide {
  height: calc((100% - 30px) / 2) !important;
  width: 290px;
}
.slide--client .logo-client{ background-color: #fff; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 40px; }
.slide--client .logo-client img{ max-width: 100%; height: auto; max-height: 110px; }


.btn_viewexperience{ display: none; }
.btn_viewexperience2{ margin-top: 40px; }
.btn_viewexperience2 .boxbtn,
.btn_viewexperience .boxbtn{ padding: 15px 30px; }


@media (max-width: 1599px){

  .slide--client.swiper{ height: 400px; }
  .slide--client .swiper-slide { width: 230px; }
}
@media (max-width: 1199px){

  .slide--client.swiper{ height: 300px; }
  .slide--client .swiper-slide { width: 180px; }

}
@media (max-width: 991px){

  .slide--client.swiper{ height: 360px; }
  .slide--client .swiper-slide { width: 210px; }

}
@media (max-width: 767px){

  .client-left{ width: 100%; padding-right: 0; margin-bottom: 30px; }
  .client-right{ width: 100%; }
  .slide--client.swiper{ height: auto; }
  .slide--client .swiper-slide { height: 160px !important; }
  .slide--client .logo-client{ padding: 30px; }

  .btn_viewexperience2{ display: none; }
  .btn_viewexperience{ display: block; margin: 40px auto 0; }

}


/**********************************************************/
/******************* home: testimonials *******************/

.home--testimonials{ background-image: url('../images/home/bg-testimonials.jpg'); background-repeat: no-repeat; background-position: center top; background-size: cover; }


.testimonials--founders{ margin-top: 30px; }


.card--founders{ cursor: pointer; }
.card--founders-quote{ background-color: #f7f7f7; padding: 35px; }
.card--founders-quote .quote-icon{ width: 60px; margin-bottom: 20px; }
.card--founders-quote .quote-icon img{ max-width: 100%; height: auto; }
.card--founders-quote .quote-text{ 
  font-size: 15px; line-height: 1.5; font-weight: 400; 
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.card--founders-profile{ background-color: var(--primary); padding: 15px; display: flex; align-items: center; gap: 10px; }
.card--founders-profile .profile-img{ width: 75px; height: 75px; }
.card--founders-profile .profile-img img{ width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.card--founders-profile .profile-detail{ width: calc(100% - 75px); }
.card--founders-profile .profile-detail .profile-name{ font-size: 23px; line-height: 1.4; font-weight: 600; color: var(--white);  }
.card--founders-profile .profile-detail .profile-position{ font-size: 13px; line-height: 1.4; font-weight: 400; color: var(--white);  }


.slide--founders .swiper-slide{ width: 430px !important; padding: 40px 30px; height: auto; display: flex; align-items: center; }
.slide--founders .swiper-slide.swiper-slide-active{ width: 480px !important; }
.slide--founders .swiper-slide.swiper-slide-active .card--founders{ box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.2); height: 100%; }
.slide--founders .swiper-slide.swiper-slide-active .card--founders-quote .quote-text{
  font-size: 16px; -webkit-line-clamp: 7;
}
.slide--founders .swiper-slide.swiper-slide-active .card--founders-profile .profile-img{ width: 90px; height: 90px; }
.slide--founders .swiper-slide.swiper-slide-active .card--founders-profile .profile-detail{ width: calc(100% - 90px); }
.slide--founders .swiper-slide.swiper-slide-active .card--founders-profile .profile-detail .profile-name{ font-size: 26px; }
.slide--founders .swiper-slide.swiper-slide-active .card--founders-profile .profile-detail .profile-position{ font-size: 16px; }



@media (max-width: 1199px){

  .slide--founders .swiper-slide{ padding: 40px 20px; }

}
@media (max-width: 576px){

  .card--founders-quote{ padding: 25px; }
  .card--founders-quote .quote-icon{ width: 50px; margin-bottom: 15px; }

  .slide--founders .swiper-slide{ width: 100% !important; padding: 20px; height: 100%; }
  .slide--founders .swiper-slide.swiper-slide-active{ width: 100% !important; }

  .slide--founders .swiper-slide.swiper-slide-active .card--founders-quote .quote-text{
  font-size: 15px; -webkit-line-clamp: 5; }
  .card--founders-profile .profile-img,
  .slide--founders .swiper-slide.swiper-slide-active .card--founders-profile .profile-img{ width: 70px; height: 70px; }
  .card--founders-profile .profile-detail,
  .slide--founders .swiper-slide.swiper-slide-active .card--founders-profile .profile-detail{ width: calc(100% - 70px); }
  .card--founders-profile .profile-detail .profile-name,
  .slide--founders .swiper-slide.swiper-slide-active .card--founders-profile .profile-detail .profile-name{ font-size: 20px; }
  .card--founders-profile .profile-detail .profile-position,
  .slide--founders .swiper-slide.swiper-slide-active .card--founders-profile .profile-detail .profile-position{ font-size: 12px; }

}


.modal-founders .jw-modal-body{ padding: 0; }
.pupup--founders .card--founders-quote{ background-color: #fff; }
.pupup--founders .card--founders-profile{ justify-content: center; }
.pupup--founders .card--founders-profile .profile-detail{ width: auto; }
.pupup--founders .card--founders-quote p{ font-size: 18px; line-height: 1.5; font-weight: 400; margin-bottom: 20px; }
.pupup--founders .card--founders-quote p:last-child{ margin-bottom: 0; }
.pupup--founders .article--quote{ max-height: 400px; overflow-y: auto; }
.btn_closex{ position: absolute; top: 20px; right: 20px; }


@media (max-width: 1599px){

  .pupup--founders .card--founders-quote p{ font-size: 16px; }
  .pupup--founders .article--quote{ max-height: 350px; }

}
@media (max-width: 767px){

  .pupup--founders .article--quote{ max-height: 300px; }

}


/**********************************************************/
/********************** home: news ************************/

.home--news{ background-image: url('../images/home/bg-news.jpg'); background-repeat: no-repeat; background-position: center bottom; background-size: cover; color: var(--default); }


.newsimg{ margin-bottom: 20px; }
.newscate{ margin-bottom: 15px; }
.newscate a{ font-size: 18px; line-height: 1; font-weight: 300; color: var(--secondary); }
.newscate a:hover{ color: var(--primary); }
.newstitle{ font-size: 20px; line-height: 1.5; font-weight: 500; color: var(--default); margin-bottom: 15px; }
.newsdate{ font-size: 18px; line-height: 1; font-weight: 300; color: var(--default); margin-bottom: 30px; }
.newslink a{ font-size: 20px; line-height: 1; font-weight: 500; color: var(--secondary); text-decoration: underline; }
.newslink a:hover{ text-decoration: none; }

.btn_seeall{ margin-top: 70px; text-align: center; }


@media (max-width: 1199px){

  .newscate a, .newsdate{ font-size: 16px; }
  .newstitle, .newslink a{ font-size: 18px; }

}
@media (max-width: 991px){

  .newscate, .newsdate{ font-size: 14px; }
  .newstitle, .newslink a{ font-size: 16px; }

}




/**********************************************************/
/*************************** news *************************/

.news--nav{ display: flex; align-items: center; justify-content: center; gap: 50px; flex-flow: row wrap; border-top: 1px solid #b5d1db; border-bottom: 1px solid #b5d1db; padding: 30px 0; margin-bottom: 80px; }
.news--nav a{ font-family: var(--font-Bebas_Neue); font-size: 52px; color: var(--secondary); position: relative; }
.news--nav a:lang(th){ font-weight: 600; }

.news--nav a:hover, .news--nav a.active{ color: var(--primary); }
.news--nav a.active::after{ content: ''; position: absolute; left: 0; bottom: -30px; width: 100%; height: 5px; background-color: var(--primary); }

@media (max-width: 1199px){

  .news--nav{ gap: 40px; }
  .news--nav a{ font-size: 40px; }

}
@media (max-width: 991px){

  .news--nav{ margin-bottom: 50px; }

}
@media (max-width: 767px){

  .news--nav{ padding: 20px 0; }
  .news--nav a{ font-size: 32px; }
  .news--nav a.active::after{ bottom: -20px; height: 3px; }

}
@media (max-width: 576px){

  .news--nav a{ font-size: 24px; }

}

.news-row{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative;
  margin-left: -30px; margin-right: -30px;
}
.news-col{
  position: relative;
  width: 100%;
  padding-left: 30px; padding-right: 30px;
  -ms-flex: 0 0 33.33333%;
  flex: 0 0 33.33333%;
  max-width: 33.33333%;
  margin-bottom: 60px;
}

@media (max-width: 1199px){

  .news-row{ margin-left: -20px; margin-right: -20px; }
  .news-col{ padding-left: 20px; padding-right: 20px; margin-bottom: 50px; }

}
@media (max-width: 991px){

  .news-row{ margin-left: -15px; margin-right: -15px; }
  .news-col{ 
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 15px; padding-right: 15px; margin-bottom: 40px; 
  }

}
@media (max-width: 576px){

  .news-col{ 
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

}



/* article */
.title-h1{ font-family: var(--font-Bebas_Neue); font-size: var(--txt-title); line-height: 1.1; font-weight: 400; text-align: center; color: var(--secondary); max-width: 1120px; width: 90%; margin: 0 auto; margin-bottom: 20px; }
/* .title-h1:lang(th){ font-weight: 600; } */
.divdate{ font-size: 24px; line-height: 1.3; font-weight: 400; color: #555; text-align: center; }

@media (max-width: 1199px){

  .divdate{ font-size: 20px; }

}
@media (max-width: 767px){

  .divdate{ font-size: 16px; }

}

.article-img{ margin: 50px 0; }
.divGallery-item{ text-align: center; }
.divGallery-slide .swiper-wrapper {
    height: auto !important; 
}
.divGallery-slide .swiper-slide {
    height: auto !important;
}
.divGallery-slide .yourFluidImage { 
    width: 100%;
    height: auto;
}
.divGallery-slide .swiper-slide img {
    width: 100%; opacity: 0.5;
    height: auto; transform: scale(0.85);
    transition: transform 0.3s ease;
}
.divGallery-slide .swiper-slide-active img {
    transform: scale(1); opacity: 1;
}
.divGallery-slide .swiper-button-prev{ left: 16.5%; }
.divGallery-slide .swiper-button-next{ right: 16.5%; }

@media (max-width: 1599px){

  .divGallery-slide .swiper-button-prev{ left: 9.5%; }
  .divGallery-slide .swiper-button-next{ right: 9.5%; }

}
@media (max-width: 1199px){

  .divGallery-slide .swiper-button-prev{ left: 3.5%; }
  .divGallery-slide .swiper-button-next{ right: 3.5%; }

}
@media (max-width: 767px){

  .divGallery-slide .swiper-button-prev{ left: 0; }
  .divGallery-slide .swiper-button-next{ right: 0; }

}



.div-article{ max-width: 1120px; width: 90%; margin: 0 auto; }
.div-article h2{ font-size: 34px; line-height: 1.3; font-weight: bold; margin-bottom: 10px; }
.div-article h3{ font-size: 30px; line-height: 1.3; font-weight: bold; margin-bottom: 10px; }
.div-article ul{ list-style: disc; margin-left: 23px; margin-bottom: 30px; }
.div-article ol{ list-style: decimal; margin-left: 20px; margin-bottom: 30px; }
.div-article p, .div-article li{ font-size: 22px; line-height: 1.4; font-weight: 300; }
.div-article p{ margin-bottom: 30px; }
.div-article li{ margin-bottom: 10px; }
.div-article p:last-child,
.div-article ul:last-child,
.div-article ol:last-child,
.div-article li:last-of-type{ margin-bottom: 0; }
.div-article a{ text-decoration: underline; }


@media (max-width: 1199px){

  .div-article h2{ font-size: 30px; }
  .div-article h3{ font-size: 24px; }
  .div-article p, .div-article li{ font-size: 20px; }

}
@media (max-width: 767px){

  .div-article h2{ font-size: 24px; }
  .div-article h3{ font-size: 20px; }
  .div-article p, .div-article li{ font-size: 16px; }
  .div-article ul{ margin-left: 20px; }

}

/* body.page-template-default .div-article h2{ font-size: 24px; } */


.article-share{ max-width: 1120px; width: 90%; margin: 50px auto 0; }
.article-share ul{ display: flex; gap: 20px; align-items: center; list-style: none; margin: 0; }
.article-share li span{ font-size: 20px; line-height: 1; font-weight: 400; color: var(--secondary); border-bottom: 1px solid var(--secondary); }
.article-share li a:hover{ opacity: 0.8; }

@media (max-width: 1199px){

  .article-share li span{ font-size: 16px; }
  .article-share li img{ width: 30px; }

}
@media (max-width: 767px){

  .article-share li span{ font-size: 14px; }

}




.pageNumber {
  width: 100%; text-align: center; margin-top: 50px;
}
.pageNumber .nav-links a.page-numbers, 
.pageNumber .nav-links span{
  font-family: var(--font-Bebas_Neue); font-size: 45px; font-weight: 400; color: var(--secondary);
  margin: 0; border-bottom: 5px solid transparent; margin: 0 10px;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
}


.pageNumber .nav-links a.next:hover, 
.pageNumber .nav-links a.prev:hover,
.pageNumber .nav-links a.page-numbers:hover{ color: var(--primary); }

.pageNumber .nav-links a.page-numbers.current,
.pageNumber .nav-links span.current{ color: var(--primary); border-color: var(--primary); }

@media (max-width: 1199px){

  .pageNumber .nav-links a.page-numbers, 
  .pageNumber .nav-links span{ font-size: 40px; }

}
@media (max-width: 767px){

  .pageNumber .nav-links a.page-numbers, 
  .pageNumber .nav-links span{ font-size: 30px; margin: 0 8px; border-width: 3px; }

}




/**********************************************************/
/************************* contact ************************/

.contact-row{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative;
  margin-left: -40px; margin-right: -40px;
}
.contact--form,
.contact--detail{
  position: relative;
  width: 100%;
  padding-left: 40px; padding-right: 40px;
}
.contact--form{
  -ms-flex: 0 0 60%;
  flex: 0 0 60%;
  max-width: 60%;
}
.contact--detail{
  -ms-flex: 0 0 40%;
  flex: 0 0 40%;
  max-width: 40%;
}
.contact--detail a:hover{ color: var(--primary); text-decoration: underline; }

@media (max-width: 1199px){

  .contact-row{ margin-left: -25px; margin-right: -25px; }
  .contact--form, .contact--detail{
    padding-left: 25px; padding-right: 25px;
  }

}
@media (max-width: 991px){

  .contact-row{ margin-left: -15px; margin-right: -15px; }
  .contact--form, .contact--detail{
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 15px; padding-right: 15px;
  }
  .contact--form{ margin-bottom: 50px; }

}


/* form */
.contact-form-row{ display: flex; justify-content: space-between; flex-flow: row wrap; }
.contact-form-col{ width: 48%; }

.form-group{ margin-bottom: 25px; }
.form-group label{ font-size: 20px; line-height: 1.6; font-weight: 400; color: var(--default); display: block; margin-bottom: 5px; }
.form-group label span.remark{ color: var(--primary2); }
.form-group .form-control{ width: 100%; padding: 10px; border: 0; border-radius: 0; font-family: "Noto Sans Thai", sans-serif; font-size: 20px; line-height: 1.4; font-weight: 400; color: var(--default); background-color: #f7f7f7; }

.form-control::-webkit-input-placeholder {
  color: #aaa; opacity: 1;
}
.form-control::-moz-placeholder {
  color: #aaa; opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: #aaa; opacity: 1;
}
.form-control::-ms-input-placeholder {
  color: #aaa; opacity: 1;
}
.form-control::placeholder {
  color: #aaa; opacity: 1;
}

@media (max-width: 991px){

  .form-group .form-control,
  .form-group label{ font-size: 18px; }

}
@media (max-width: 767px){

  .contact-form-col{ width: 100%; }

}

.contact--detail p{ font-size: 20px; line-height: 1.5; font-weight: 400; color: var(--default); margin-bottom: 10px; }
.contact--address{ margin-bottom: 30px; }



.map-canvas{ width: 100%; height: 690px; }

@media (max-width: 1599px){

  .map-canvas{ height: 500px; }

}
@media (max-width: 991px){

  .map-canvas{ height: 400px; }
  .contact--detail p{ font-size: 18px; }

}




/**********************************************************/
/************************** about *************************/

.about--team{ background-color: #f7f7f7; }

.about--title{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative; 
}
.abouttitle--left{
  position: relative; 
  width: 100%;
  -ms-flex: 0 0 45%;
  flex: 0 0 45%;
  max-width: 45%;
}
.abouttitle--right{
  position: relative;
  width: 100%;
  -ms-flex: 0 0 55%;
  flex: 0 0 55%;
  max-width: 55%;
}
.about--title p{ font-size: 22px; line-height: 1.5; font-weight: 300; }

@media (max-width: 1599px){

  .about--title p{ font-size: 20px; }

}
@media (max-width: 991px){

  .abouttitle--left,
  .abouttitle--right{
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .about--title p{ font-size: 18px; }

}

.team--group{ margin-top: 100px; display: flex; flex-flow: row wrap; gap: 30px; }
.team--item{ background-color: var(--white); margin-bottom: 100px; width: calc(25% - 25px); }
.team--item .team--img{ margin-top: -60px; padding: 0 30px; background-image: url('../images/about/bg-team.jpg'); background-repeat: no-repeat; background-position: center bottom; background-size: cover; }
.team--item .team--img{ line-height: 0; }
.team--item .team--img img{ max-width: 100%; height: auto; }
.team--item .team--detail{ padding: 30px 20px; }
.team--item .team--detail .team-name{ font-size: 24px; line-height: 1.3; font-weight: 600; color: var(--secondary); margin-bottom: 10px; }
.team--item .team--detail .team-position{ font-size: 20px; line-height: 1.4; font-weight: 400; color: var(--primary); margin-bottom: 0; }
.team--item .team--detail p{ font-size: 20px; line-height: 1.5; font-weight: 300; color: var(--default); margin-bottom: 20px; }
.team--item .team--detail p:last-child{ margin-bottom: 0; }

@media (max-width: 1599px){

  /* .team--item .team--detail .team-name{ font-size: 28px; }
  .team--item .team--detail .team-position{ font-size: 20px; } */
  .team--item .team--detail p{ font-size: 18px; }

}
@media (max-width: 1199px){

  .team--item{ margin-bottom: 80px; width: calc(33.33333% - 20px); }
  .team--item .team--detail .team-name{ font-size: 22px; }
  .team--item .team--detail .team-position{ font-size: 18px; }
  .team--item .team--detail p{ font-size: 16px; }
  .team--item .team--img{ align-content: flex-end;  }
  .team--item .team--detail{ padding: 30px 20px; }

}
@media (max-width: 991px){

  .team--item{ width: calc(50% - 15px); margin-bottom: 50px; }
  .team--item .team--img{ margin-left: auto; margin-right: auto; }
  .team--item .team--detail{ width: 100%; }

}
@media (max-width: 767px){

  .team--item .team--detail .team-name{ font-size: 20px; }
  .team--item .team--detail .team-position{ font-size: 16px; }

}
@media (max-width: 576px){

  .team--item{ width: 100%; }

}



.about-image{ text-align: center; margin-bottom: 30px; }
.about-text-content{ max-width: 860px; margin: 0 auto; }
.about-text-content p{ font-size: 22px; line-height: 1.5; font-weight: 400; margin-bottom: 40px; }
.about-text-content p:last-child{ margin-bottom: 0; }

@media (max-width: 1599px){

  .about-text-content p{ font-size: 18px; margin-bottom: 30px; }

}
@media (max-width: 576px){

  .about-text-content p{ font-size: 16px; }

}


/**********************************************************/
/*********************** experience ***********************/

.section-experience{ background-color: #f2f2f2; }
.experience-title{ font-size: 38px; line-height: 1.3; font-weight: 600; color: var(--secondary); margin-bottom: 50px; }

.accordion-item{ margin-bottom: 40px; }

.accordion button {
  position: relative;
  display: flex; justify-content: space-between; align-items: center;
  text-align: left;
  width: 100%;
  padding: 0px 30px 0 0;
  color: var(--secondary);
  border: none;
  background: none; cursor: pointer;
  outline: none;
}
.accordion button::after{ content: ''; position: absolute; left: 0; bottom: 8px; width: calc(100% - 35px); height: 2px; background-color: var(--primary); z-index: 1; }

.accordion button .accordion-title{ font-family: "Noto Sans Thai", sans-serif; font-size: 30px; line-height: 1.5; font-weight: 500; background-color: #f2f2f2; position: relative; z-index: 4; }

.accordion button .icon {
  display: inline-block;
  position: absolute;
  top: 8px;
  right: 0;
  background-image: url(../images/icon/icon-plus.png); background-repeat: no-repeat;  background-size: cover; width: 30px; height: 34px; z-index: 3;
}
.accordion button[aria-expanded='true'] .icon{
  background-image: url(../images/icon/icon-minus.png); 
}

.accordion button[aria-expanded='true'] + .accordion-content {
  opacity: 1;
  height: auto;
  transition: all 200ms linear;
  will-change: opacity, height;
}
.accordion .accordion-content {
  opacity: 0;
  height: 0;
  overflow: hidden; 
  transition: opacity 200ms linear, height 200ms linear;
  will-change: opacity, height;
}


.accordion-article{ padding-top: 24px; }
.accordion--row{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative; 
  margin-left: -20px; margin-right: -20px;
}
.accordion--col{
  position: relative; 
  width: 100%;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
  padding-left: 20px; padding-right: 20px;
}

.accordion--card{ margin-bottom: 50px; }
.accordion--card .title{ font-size: 20px; line-height: 1.4; font-weight: 500; margin-bottom: 10px; }
.accordion--card .logoimg{ margin-bottom: 10px; width: 100%; height: 200px; display: flex; align-items: center; justify-content: center; background-color: #fff; padding: 20px; }
.accordion--card .logoimg img{max-height: 105px; }
.accordion--card p{ font-size: 18px; line-height: 1.4; font-weight: 300; margin-bottom: 10px; }



@media (max-width: 1199px){

  .experience-title{ font-size: 32px; margin-bottom: 40px; }
  .accordion button .accordion-title{ font-size: 24px; }
  .accordion button .icon { top: 3px; }
  .accordion--card .title{ font-size: 18px; }
  .accordion--card p{ font-size: 16px; }
  .accordion--card .logoimg{ height: 150px; }
  

}
@media (max-width: 991px){

  .experience-title{ font-size: 28px; }
  .accordion button .accordion-title{ font-size: 22px; }
  .accordion button .icon { top: 0; }
  .accordion--row{
    margin-left: -15px; margin-right: -15px;
  }
  .accordion--col{
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
    padding-left: 15px; padding-right: 15px;
  }


}
@media (max-width: 767px){

  .accordion--col{
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }


}
@media (max-width: 576px){

  .accordion--col{
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .experience-title{ font-size: 24px; }
  .accordion button .accordion-title{ font-size: 20px; }
  .accordion button .icon{ width: 25px; height: 29px; }
  .accordion button::after{ width: calc(100% - 30px); }
  .accordion--card .logoimg{ height: 200px; }

}



/**********************************************************/
/************************* service ************************/

.service-title{ font-size: 38px; line-height: 1.3; font-weight: 600; margin-bottom: 20px; color: var(--secondary); }
.clients-detail p,
.service-subtitle,
.service-footer-text{ font-size: 22px; line-height: 1.5; font-weight: 400; margin-bottom: 40px; }
.service-footer-text{ margin-bottom: 0; margin-top: 40px; }
.service-subtitle p{ margin-bottom: 30px; }

.clients--row{ display: flex; flex-flow: row wrap; position: relative; }
.clients-col{ width: 50%; }
.clients-img{ padding-right: 80px; }
.clients-img img{ width: 100%; height: auto; }
.clients-detail{ max-width: 720px; width: 90%; padding-top: 35px; }
.clients-detail .service-title{ color: var(--secondary); margin-bottom: 20px; }
.clients-detail ul{ list-style: disc; margin-left: 20px; margin-bottom: 40px; }
.clients-detail ul li{ font-size: 22px; line-height: 1.5; font-weight: 400; color: var(--default); }

.service-subtitle p:last-child,
.clients-detail p:last-child, .service-subtitle:last-child, .clients-detail ul:last-child{ margin-bottom: 0; }

.clients--row.row--reverse{ flex-direction: row-reverse; }
.clients--row.row--reverse .clients-img{ padding-left: 80px; padding-right: 0; }
.clients--row.row--reverse .clients-col:last-child{ display: flex; justify-content: flex-end; }


.service--why{ background-image: url('../images/service/bg-why.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; }
.service--why .service-title,
.service--why .service-subtitle,
.service--why .service-footer-text{ color: var(--white); }
.service--why .service-subtitle{ margin-bottom: 20px; }
.service--why .service-footer-text{ margin: 0; }

.slide--why-row{ 
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative; 
  margin-left: -10px; margin-right: -10px;
}
.slide--why-col{
  position: relative; 
  width: 100%;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
  padding-left: 10px; padding-right: 10px;
  margin-bottom: 40px;
}

.slidewhy-3col .slide--why-row{ margin-left: -15px; margin-right: -15px; }
.slidewhy-3col .slide--why-col{
  -ms-flex: 0 0 33.33333%;
  flex: 0 0 33.33333%;
  max-width: 33.33333%;
  padding-left: 15px; padding-right: 15px;
}


.card--servicewhy-img{ margin-bottom: 20px; }
.card--servicewhy-text h3{ font-size: 22px; line-height: 1.3; font-weight: 500; color: var(--white); margin-bottom: 5px; }
.card--servicewhy-text p{ font-size: 18px; line-height: 1.4; font-weight: 300; color: var(--white); }

.home--news .card--servicewhy-text h3,
.home--news .card--servicewhy-text p{ color: var(--default); }
.home--news .service-footer-text{ margin-top: 0; }


@media (max-width: 1599px){

  .service-title{ font-size: 34px; }
  .clients-detail p, .clients-detail ul,
  .service-subtitle{ margin-bottom: 20px; }

  .clients-img{ padding-right: 50px; }
  .clients-detail{ padding-top: 0; }

  .clients-detail p,
  .service-subtitle, .service-footer-text,
  .clients-detail ul li,
  .card--servicewhy-text p{ font-size: 18px; }

}
@media (max-width: 1199px){

  .slidewhy-3col .slide--why-row{ margin-left: -20px; margin-right: -20px; }
  .slidewhy-3col .slide--why-col{
    padding-left: 20px; padding-right: 20px;
  }

  .service-title{ font-size: 30px; }

  .card--servicewhy-text h3{ font-size: 20px; }
  .card--servicewhy-text p{ font-size: 16px; }

}
@media (max-width: 991px){

  .clients-col{ width: 100%; }
  .clients-img{ padding-right: 0; margin-bottom: 20px; }
  .clients-detail{ margin: 0 auto; }

  .clients--row.row--reverse .clients-img{ padding-left: 0; }

  .slidewhy-3col .slide--why-col,
  .slide--why-col{
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .slidewhy-3col .slide--why-row{ margin-left: -15px; margin-right: -15px; }
  .slidewhy-3col .slide--why-col{
    padding-left: 15px; padding-right: 15px;
  }

}
@media (max-width: 576px){

  .service-title{ font-size: 24px; }

  .clients-detail p,
  .service-subtitle, .service-footer-text,
  .clients-detail ul li{ font-size: 16px; }

  .slidewhy-3col .slide--why-col,
  .slide--why-col{
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 30px;
  }

}


.service--advisory{ background-image: url('../images/service/bg-advisory.jpg'); background-repeat: no-repeat; background-position: right top; background-size: contain; }
.service--advisory-item{ display: flex; flex-flow: row wrap; position: relative; margin-bottom: 40px; }
.service--advisory-item:last-child{ margin-bottom: 0; }
.service--advisory-img{ width: 400px; margin-right: 30px; }
.service--advisory-img img{ width: 100%; height: auto; }
.service--advisory-detail{ flex: 1; }
.service--advisory-detail .title{ font-size: 24px; line-height: 1.3; font-weight: 600; margin-bottom: 15px; }
.service--advisory-detail p{ font-size: 20px; line-height: 1.5; font-weight: 400; margin-bottom: 30px; }
.service--advisory-detail p:last-child{ margin-bottom: 0; }

.service--advisory.about-product .service-subtitle{ margin-bottom: 40px; }
.service--advisory.about-product .service--advisory-img{ width: 440px; }


@media (max-width: 1599px){

  .service--advisory-detail .title{ font-size: 22px; }
  .service--advisory-detail p{ font-size: 18px; }

}
@media (max-width: 1199px){

  .service--advisory.about-product .service--advisory-img,
  .service--advisory-img{ width: 300px; margin-right: 30px; }
  .service--advisory-detail .title{ font-size: 20px; margin-bottom: 10px; }
  .service--advisory-detail p{ font-size: 16px; }

}
@media (max-width: 991px){

  .service--advisory.about-product .service--advisory-img,
  .service--advisory-img{ width: 100%; margin-right: 0; margin-bottom: 20px; }

}
@media (max-width: 576px){

  .service--advisory{ background-size: 200%; }
  .service--advisory-detail p{ font-size: 14px; }

}


.service--contactrow{ 
  background-color: #15aaec;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative; 
  box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.3); mix-blend-mode: multiply;
}
.service--contactrow .contactrow-img,
.service--contactrow .contactrow-detail{
  position: relative; 
  width: 100%;
}
.service--contactrow .contactrow-img{
  -ms-flex: 0 0 34%;
  flex: 0 0 34%;
  max-width: 34%;
 }
.service--contactrow .contactrow-img img{ width: 100%; height: 100%; object-fit: cover; }
.service--contactrow .contactrow-detail{ 
  padding: 20px 40px; color: var(--white); 
  -ms-flex: 0 0 66%;
  flex: 0 0 66%;
  max-width: 66%;
  display: flex; flex-direction: column; justify-content: center;
}
.service--contactrow .contactrow-detail .title{ font-family: var(--font-Bebas_Neue); font-size: 65px; line-height: 1; font-weight: 400; margin-bottom: 30px; }
/* .service--contactrow .contactrow-detail .title:lang(th){ font-weight: 600; } */
.service--contactrow .contactrow-detail .subhead{ font-size: 32px; line-height: 1.4; font-weight: 600; margin-bottom: 30px; }
.service--contactrow .contactrow-detail .text{ font-size: 22px; line-height: 1.5; font-weight: 300; margin-bottom: 30px; }
/* .service--contactrow .contactrow-detail .btncontact{ margin-bottom: 30px; } */
.service--contactrow .contactrow-detail .btncontact .boxbtn{ background-color: var(--white); color: var(--secondary); }
.service--contactrow .contactrow-detail .btncontact .boxbtn:hover{ background-color: var(--secondary); color: var(--white); }
.service--contactrow .contactrow-detail .ps{ font-size: 22px; line-height: 1.4; font-weight: 300; }

@media (max-width: 1599px){

  .service--contactrow .contactrow-detail .title{ font-size: 50px; margin-bottom: 20px; }
  .service--contactrow .contactrow-detail .subhead{ font-size: 28px; margin-bottom: 20px; }
  .service--contactrow .contactrow-detail .text,
  .service--contactrow .contactrow-detail .ps{ font-size: 20px; }
  .service--contactrow .contactrow-detail .text{ margin-bottom: 25px; }

}
@media (max-width: 1199px){

  .service--contactrow .contactrow-detail{ padding: 0px 30px; }
  .service--contactrow .contactrow-detail .title{ font-size: 42px; }
  .service--contactrow .contactrow-detail .subhead{ font-size: 22px; }
  .service--contactrow .contactrow-detail .text,
  .service--contactrow .contactrow-detail .ps{ font-size: 18px; }

}
@media (max-width: 991px){

  .service--contactrow .contactrow-detail{ padding: 30px; }
  .service--contactrow .contactrow-img,
  .service--contactrow .contactrow-detail{
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .service--contactrow .contactrow-img{ height: 400px; }
  .service--contactrow .contactrow-detail .title{ font-size: 48px; }
  .service--contactrow .contactrow-detail .subhead{ font-size: 26px; }

}
@media (max-width: 576px){

  .service--contactrow .contactrow-img{ height: 300px; }
  .service--contactrow .contactrow-detail .title{ font-size: 38px; }
  .service--contactrow .contactrow-detail .subhead{ font-size: 22px; }
  .service--contactrow .contactrow-detail .text,
  .service--contactrow .contactrow-detail .ps{ font-size: 16px; }

}


.services--polygonprime-row{ display: flex; flex-flow: row wrap; position: relative; }
.services--polygonprime-col{
  position: relative; 
  width: 100%;
  -ms-flex: 0 0 33.33333%;
  flex: 0 0 33.33333%;
  max-width: 33.33333%;
}

@media (max-width: 1199px){

  .services--polygonprime .polygon-card-detail{ padding: 20px; }
  .services--polygonprime .polygon-title-card .polygon-title{ font-size: 15px; }

}
@media (max-width: 991px){

  .services--polygonprime-col{
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .services--polygonprime .polygon-title-card .polygon-title{ font-size: 20px; }
  .services--polygonprime .polygon-card-detail ul{ max-height: max-content; }
  .services--polygonprime .polygon-card-detail li{ font-size: 16px; }

}
@media (max-width: 767px){

  .services--polygonprime-col{
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

}



.service--going{ background-color: #096688; padding: 80px 0; color: var(--white); }
.service-eltop,
.service-elbottom{ position: absolute; right: 0; }
.service-eltop{ top: 0; }
.service-elbottom{ bottom: 0; }

.divbox-advantages_going{ margin-bottom: 50px; border-bottom: 1px solid rgba(255, 255, 255, 0.5); padding-bottom: 50px; }
.divbox-advantages_going .service-title{ color: var(--white); }
.divbox-advantages_going:last-child{ margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

.advantages_going--list{ display: flex; flex-flow: row wrap; gap: 30px; }
.card-going{ width: calc(50% - 15px); background-color: var(--white); border-radius: 30px; padding: 30px; display: flex; }
.card-going--icon{ padding-right: 30px; }
.card-going--icon img{ width: 100px; }
.card-going--detail{ width: calc(100% - 130px); }
.card-going--detail .title{ font-size: 24px; line-height: 1.3; font-weight: 500; color: var(--secondary); margin-bottom: 5px; }
.card-going--detail p{ font-size: 20px; line-height: 1.4;  color: var(--default); }

/*  */
.card-going.middle-text{ align-items: center; }
.card-going-3col .card-going{ width: calc(33.33333% - 20px); padding: 25px; }
.card-going-3col .card-going--icon img{ width: 80px; }
.card-going-3col .card-going--detail{ width: calc(100% - 110px); }


@media (max-width: 1599px){

  .service-eltop img,
  .service-elbottom img{ width: 600px; }

  .card-going-3col .card-going--detail{ width: calc(100% - 80px); }
  .card-going-3col .card-going--detail .title{ font-size: 20px; }
  .card-going--detail p{ font-size: 16px; }
  .card-going-3col .card-going--icon{ padding-right: 20px; }
  .card-going-3col .card-going--icon img{ width: 60px; }

}
@media (max-width: 1199px){

  .service-eltop img,
  .service-elbottom img{ width: 500px; }
  
  .card-going--icon img{ width: 80px; }
  .card-going--detail{ width: calc(100% - 110px); }
  .card-going--detail .title{ font-size: 22px; }
  .card-going--detail p{ font-size: 18px; }

  .card-going-3col .card-going{ padding: 20px; border-radius: 20px; }
  .card-going-3col .card-going--icon{ padding-right: 15px; }
  .card-going-3col .card-going--icon img{ width: 40px; }
  .card-going-3col .card-going--detail{ width: calc(100% - 55px); }
  .card-going-3col .card-going--detail .title{ font-size: 16px; }
  .card-going--detail p{ font-size: 15px; }

}
@media (max-width: 991px){

  .service--going{ padding: 50px 0; }
  .divbox-advantages_going{ margin-bottom: 40px; padding-bottom: 40px; }

  .card-going{ width: 100%; padding: 30px; }

  .card-going-3col .card-going{ width: calc(50% - 15px); }
  .card-going-3col .card-going--icon img{ width: 50px; }
  .card-going-3col .card-going--detail{ width: calc(100% - 65px); }
  .card-going-3col .card-going--detail .title{ font-size: 18px; }
  .card-going-3col .card-going--detail p{ font-size: 16px; }

}
@media (max-width: 767px){

  .card-going-3col .card-going{ width: 100%; }
  .card-going-3col .card-going--icon{ padding-right: 20px; }
  .card-going-3col .card-going--icon img{ width: 50px; }
  .card-going-3col .card-going--detail{ width: calc(100% - 70px); }
  .card-going-3col .card-going--detail .title{ font-size: 20px; }
  .card-going--detail p{ font-size: 16px; }

}
@media (max-width: 576px){

  .card-going{ padding: 20px; border-radius: 20px; }
  .card-going--icon{ padding-right: 20px; }
  .card-going--icon img{ width: 50px; }
  .card-going--detail{ width: calc(100% - 70px); }
  .card-going--detail .title{ font-size: 20px; }
  .card-going--detail p{ font-size: 16px; }

}


.service--why2{ background-image: url('../images/service/bg-why2.jpg'); background-repeat: no-repeat; background-position: center top; background-size: cover; }

.why-acquires--list{ display: flex; flex-flow: row wrap; gap: 50px; }
.card-acquires{ background-color: #15aaec; width: calc(25% - 38px); padding: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center; }
.card-acquires--img img{ width: 100px; }
.card-acquires--title{ font-size: 20px; line-height: 1.4; color: #fff; }


@media (max-width: 1199px){

  .why-acquires--list{ gap: 30px; }
  .card-acquires{ width: calc(25% - 23px); }
  .card-acquires img{ width: 80px; }

}
@media (max-width: 991px){

  .card-acquires{ width: calc(50% - 15px); }

}
@media (max-width: 576px){

  .why-acquires--list{ gap: 20px; }
  .card-acquires{ width: calc(50% - 10px); gap: 10px; }
  .card-acquires img{ width: 60px; }
  .card-acquires--title{ font-size: 16px; }

}


/**********************************************************/
/**********************************************************/

.boxpage404{ display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }

.boxpage404 .title{ font-family: var(--font-Bebas_Neue); font-size: 100px; line-height: 1; font-weight: 600; color: var(--secondary); }
.boxpage404 .subtitle{ font-size: 30px; line-height: 40px; color: var(--secondary); font-weight: 600; }
.boxpage404 p{ font-size: 18px; line-height: 24px; color: #333; font-weight: 400; margin-bottom: 50px; }


/**********************************************************/
/**********************************************************/

.popup-detail{ text-align: center; }
.popup-title{ font-size: 28px; font-weight: 600; color: var(--secondary); margin-bottom: 20px; }
.popup--txt{ max-width: 570px; margin: 0 auto 30px; font-size: 26px; line-height: 1.4; font-weight: 300; color: var(--secondary); }


/* MODAL STYLES
-------------------------------*/
.jw-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background-color: rgba(0, 0, 0, .75);
  padding: 40px;
  overflow: auto;
}
.jw-modal.open {
  display: block;
}
.jw-modal-body {
  background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 620px; width: 90%; padding: 50px 20px; border-radius: 0;
  display: flex; flex-direction: column; justify-content: space-between;
}
body.jw-modal-open {
  overflow: hidden;
}

@media (max-width: 991px){

  .popup-title{ font-size: 24px; }
  .popup--txt{ font-size: 18px; }

}
@media (max-width: 576px){

  .popup-title{ font-size: 20px; }
  .popup--txt{ font-size: 18px; }
  .jw-modal-body{ padding: 40px 20px; }

}

/**********************************************************/


.wpcf7-not-valid-tip{
  padding: 7px;
  font-size: 12px;
}
.wpcf7-response-output{
  display: none !important;
}

body.logged-in.admin-bar .div-nav{ top: 32px; }
@media (max-width: 991px){
  
  body.logged-in.admin-bar .div-nav{ top: 46px; }
  body.logged-in.admin-bar #nav-icon1{ top: 56px; }

}
@media screen and (max-width: 600px) {
    #wpadminbar {
        position: fixed;
    }
}

.dpdpa--popup-text a{ color: var(--secondary); text-decoration: underline; }
a.dpdpa--popup-button{ background-color: var(--primary) !important; }