/* CSS Document */

/* @import url("../fonts/AsanghaDEMO/stylesheet.css");
@import url("../fonts/BrownSugar/stylesheet.css"); */

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Mitr:wght@200;300;400;500;600;700&family=Noto+Sans+Thai+Looped&family=Oswald:wght@200..700&family=Taviraj:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



/* 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:#021689; 
  --primary: #152238;
  --gold: #d1c4b8;
  
  --filter-white: invert(100%) sepia(98%) saturate(6%) hue-rotate(63deg) brightness(103%) contrast(100%);
  --filter-primary: invert(8%) sepia(12%) saturate(6911%) hue-rotate(195deg) brightness(91%) contrast(89%);
  --filter-gold: invert(78%) sepia(6%) saturate(534%) hue-rotate(348deg) brightness(105%) contrast(83%);

  --font-Taviraj: "Taviraj", serif;
  --font-Mitr: "Mitr", sans-serif;
  --font-Noto: "Noto Sans Thai Looped", sans-serif;

  --title: 40px;
  --subtitle: 30px;

}

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

    --title: 40px;
    --subtitle: 24px;

  }
}




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

body{ 
	background-color:var(--white); 
}
body{ font-family: "Mitr", 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; }
figure{ margin: 0 0 1rem; }

a,
a:hover{
  text-decoration:none;
  color: inherit;
  outline:0; transition: all 0.3s ease;
}
a:focus {
  text-decoration:none;
  outline: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; padding: 0 15px; }

.nav-container,
.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;
  }
}

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

@media (min-width: 992px) {
  .nav-container,
  .div-container, .div-container--fluid{
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .nav-container,
  .div-container, .div-container--fluid {
    max-width: 1140px;
  }
}
@media (min-width: 1360px) {
  .nav-container,
  .div-container, .div-container--fluid {
    max-width: 1260px;
  }
}
@media (min-width: 1440px) {
  .nav-container,
  .div-container, .div-container--fluid {
    max-width: 1360px;
  }
}
@media (min-width: 1920px) {
  .nav-container,
  .div-container, .div-container--fluid {
    max-width: 1760px;
  }
}

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





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

.div-nav{ position: fixed; width: 100%; top: 0; left: 0; z-index: 999; padding: 15px 0; background-color: var(--white); }
/* .nav-container{ max-width: 1760px; margin: 0 auto; } */
.nav-logo{ max-width: 100px; line-height: 0; margin: 0 auto; }

.nav-menu{ position: fixed; top: 0px; right: -100%; background-color: #162238; padding: 120px 0 0 80px; height: 100%; z-index: 900; transition: all 0.5s ease; width: 500px; }
.nav-menu ul{ display: flex; flex-direction: column; gap: 30px; }
.nav-menu ul li{ display: inline-block; font-size: 30px; font-style: italic; color: #d1c4b8; }

.nav-menu.navOpen{ display: block; right: 0; }


@media (max-width: 767px) {

  .div-nav{ padding: 10px; }
  .nav-logo{ width: 80px; }

  .nav-menu{ width: 100%; padding: 120px 50px 0; }
  .nav-menu ul li{ font-size: 20px; text-align: center; }

}


#nav-icon1 {
  width: 25px;
  height: 20px;
  position: fixed;
  margin: 0;
  top: 25px;
  right: 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: 10001;
}

#nav-icon1 span {
  display: block;
  position: absolute;
  height: 2px;
  width: 25px;
  background: #000;
  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.open span { background: #fff; } */
#nav-icon1 span:nth-child(1) {
  top: 0px;
}

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

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

#nav-icon1.open span:nth-child(1) {
  top: 8px;
  -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: 8px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

@media (max-width: 767px) {

  #nav-icon1{ top: 17px; right: 15px; }

}



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

.divFooter{ position: fixed; width: 100%; bottom: 0; left: 0; z-index: 9999; padding: 10px 0; background-color: #213556; font-family: var(--font-Mitr); color: var(--white); }

.ft-container{ display: flex; align-items: center; justify-content: space-between; flex-flow: row wrap; width: 100%; }

.ft-contact{ display: flex; align-items: center; gap: 40px; }
.ft-call{ font-size: 20px; line-height: 1.4; font-weight: 400; }
.ft-social{ display: flex; align-items: center; gap: 10px; }
.ft-social img{ filter: var(--filter-white); width: 30px; }
.ft-social img:hover{ filter: var(--filter-gold) }

.ft-copyright{ font-size: 12px; line-height: 1.4; font-weight: 300; }

@media (max-width: 991px){

  .ft-contact{ gap: 20px; }
  .ft-call{ font-size: 16px; }

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

  .ft-container{ justify-content: center; text-align: center; gap: 10px; }
  .ft-contact{ width: 100%; font-size: 14px; justify-content: center; }
  .ft-copyright{ width: 100%; font-size: 10px; }
  .ft-social img{ width: 20px; }

}




.divfixed{ position: fixed; width: 60px; bottom: 100px; right: 50px; z-index: 103; }
.go2top{ position: relative; width: 50px; display: none; margin: 0 auto; cursor: pointer; }
.go2top.showw{ display: block; }
.icn-line{ display: block; margin-top: 10px; border-radius: 50%; line-height: 0; }
.icn-line:hover{ box-shadow: 0 1pt 20pt rgba(0, 0, 0, .4); }

@media (max-width: 1600px){

  .divfixed{ bottom: 80px; right: 40px; }

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

  .divfixed{ right: 20px; width: 50px; }
  .go2top{ width: 40px; }
  .icn-line{ margin-top: 5px; }

}


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



/*
 *  swiper
*/

.swiper-pagination{ bottom: 40px !important; }
.swiper-pagination-bullet{ width: 16px; height: 16px; background-color: transparent; border: 1px solid var(--white); border-radius: 50%; opacity: 1; }
.swiper-pagination-bullet-active{ background-color: var(--white); }





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

section{ position: relative; }
.page-section{ padding-top: 100px; padding-bottom: 100px; }

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

.txt-darkblue{ color: #162238; }
.txt-gold{ color: var(--gold); }
.txt-primary{ color: var(--primary); }

.bg-blue{ background-color: #162238; }


.div-title{ font-family: var(--font-Taviraj); font-size: var(--title); font-weight: 600; margin-bottom: 50px; text-transform: uppercase; font-style: italic; }
.div-subtitle{ font-family: var(--font-Mitr); font-size: var(--subtitle); font-weight: 300; margin-bottom: 30px; margin-top: -30px; }



@media (max-width: 991px){

  .page-section{ padding-top: 50px; padding-bottom: 50px; }
  .div-title{ margin-bottom: 30px; }
  .div-subtitle{ margin-top: -20px; }

}

.boxbtn{ display: inline-block; font-family: var(--font-Mitr); font-size: 20px; line-height: 1; font-weight: 300; border: 0; border-radius: 0; text-decoration: none; padding: 10px 50px; transition: all 0.3s ease; cursor: pointer; color: #fff; }
.boxbtn:hover{ background-color: rgba(119, 116, 114, 1); color: #fff;  }

.btn-register1{ background-color: rgba(119, 116, 114, 0.9); }
.btn-register1:hover{ background-color: #213556; }

.btn-register2{ background-color: #f0f2f4; color: #213556; }



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



.banner-slide-item{ position: relative; width: 100%;  overflow: hidden; display: flex; justify-content: center; align-items: center; }
.banner-content{ position: absolute; top: 14%; left: 0; text-align: center; z-index: 99; color: var(--white); width: 100%; }
.banner-content .logo{ max-width: 350px; width: 100%; margin: 0 auto 30px; }
.banner-content .logo img{ filter: invert(100%) sepia(98%) saturate(6%) hue-rotate(63deg) brightness(103%) contrast(100%); }

.banner-img{ line-height: 0; width: 100%; /*height: calc(100vh - 50px);*/ }
.banner-img img{ object-fit: cover; object-position: center; width: 100%; height: 100%; }

.banner--title{ font-family: "Libre Baskerville", serif; font-size: 14.9pt; font-weight: 400; margin-bottom: 40px; }
.banner--text1{ font-family: "Josefin Sans", sans-serif; font-size: 34.7pt; margin-bottom: 10px; text-shadow: 0px 3px 4px rgba(0,0,0,0.5); letter-spacing: 1.5px; font-weight: 200; }
.banner--text2{ font-family: "Josefin Sans", sans-serif; font-size: 24.7pt; margin-bottom: 15px; text-shadow: 0px 3px 4px rgba(0,0,0,0.5); letter-spacing: 1.5px; font-weight: 200; }
.banner--text3{ font-family: "Noto Sans Thai Looped", sans-serif; font-size: 18pt; text-shadow: 0px 3px 4px rgba(0,0,0,0.5); font-weight: 200; }

.banner--btn{ margin-top: 50px; }

.banner--price{ font-family: "Lato", sans-serif; font-size: 31.9pt; font-weight: bold; margin-top: 7%; text-transform: uppercase; letter-spacing: 5px; }
.banner--price span{ font-family: "Oswald", sans-serif; font-size: 39.8pt; font-weight: bold; position: relative; top: 3px; letter-spacing: 1px; }
.banner--price span sup{ font-family: "Oswald", sans-serif; font-size: 32.9pt; font-weight: bold; position: relative; top: -20px; }
.banner--price + .banner--btn{ margin-top: 30px; }


@media (max-width: 991px){

  .banner-img{ height: calc(50vh); }
  .banner-content .logo{ max-width: 250px; margin: 0 auto 30px; }
  .banner--title{ font-size: 14pt; }
  .banner--text1{ font-size: 30pt; }
  .banner--text2{ font-size: 22pt; }
  .banner--text3{ font-size: 16pt;  }


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

  .banner--price{ margin-top: 30%; }
  .banner-img{ height: calc(100vh - 60px); }

  .banner--price{ font-size: 20pt; }
  .banner--price span{ font-size: 30pt; }
  .banner--price span sup{ font-size: 26pt; top: -10px; }
}
@media (max-width: 375px){

  .banner--price{ margin-top: 10%;  }
}

/* iPads Pro (portrait) Styling */
@media handheld, all and  (device-width: 1024px) and (device-height: 1366px) and (orientation : portrait) {

  .banner--price{ margin-top: 4%; }
  .banner-img{ height: calc(50vh); }
  
}


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



.section-register{ background-image: url('../images/bg-register.jpg'); background-repeat: no-repeat; background-size: cover; width: 100%; }


.section-register .intro{ font-family: var(--font-Noto); font-size: 18px; line-height: 1.5; font-weight: 200; color: var(--white); text-align: center; margin-bottom: 50px; }

.register-form{ max-width: 600px; margin: 0 auto; }

.form-group{ position: relative; margin-bottom: 30px; }
.form-control{ width: 100%; padding: 10px; background-color: transparent; border: 0; border-bottom: 1px solid var(--white); border-radius: 0; font-family: var(--font-Noto); font-size: 20px; line-height: 1.5; font-weight: 200;  color: var(--white); }
.form-group label{ position: absolute; top: 10px; left: 0; font-family: var(--font-Noto); font-size: 20px; line-height: 1.5; font-weight: 200;  color: var(--white); transition: all 0.3s ease; }

.form-control:focus ~ label, 
.form-control:valid ~ label{ top: -15px; font-size: 16px; }

.form-btn{ text-align: center; position: relative; }

.form-control::placeholder {
  color: transparent;
  opacity: 0;
}

.text-ps{ font-family: var(--font-Noto); font-size: 12px; line-height: 1.5; font-weight: 200; color: var(--white); text-align: center; margin-bottom: 20px; }



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

.div-lifestyle{ display: flex; flex-flow: row wrap; width: 100%; position: relative; }
.div-lifestyle2{ display: flex; flex-flow: row wrap; align-items: center; width: 100%; position: relative; padding: 50px 0; }
.lifestyle-col{ width: 50%; }

.lifestyle-detail{ position: absolute; top: 30%; width: 100%; }
.lifestyle-detail .title{ font-family: var(--font-Taviraj); font-size: 100px; line-height: 1.2; font-weight: 400; color: var(--gold); letter-spacing: 3px; margin-bottom: 10px; }
.lifestyle-detail .detail{ font-family: var(--font-Mitr); font-size: 30px; line-height: 1.5; font-weight: 200; color: var(--white); width: 45%; }

.lifestyle-detail2{ text-align: center; width: 100%; }
.lifestyle-detail2 .detail{ font-family: var(--font-Mitr); font-size: 35px; line-height: 1.5; font-weight: 200; color: var(--white); }
.lifestyle-detail2 .logo{ width: 270px; margin: 40px auto 0; }
.lifestyle-detail2 .logo img{ filter: var(--filter-white) }


@media (max-width: 1600px){

  .lifestyle-detail .title{ font-size: 80px; }
  .lifestyle-detail .detail{ font-size: 20px; }

  .lifestyle-detail2 .detail{ font-size: 24px; }
  .lifestyle-detail2 .logo{ width: 200px; }

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

  .lifestyle-detail{ top: 20%; }

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

  .lifestyle-detail .title{ font-size: 54px; }
  .lifestyle-detail .detail{ font-size: 18px; }

  .lifestyle-detail2 .detail{ font-size: 20px; }
  .lifestyle-detail2 .logo{ width: 160px; }

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

  .div-lifestyle{ flex-direction: column-reverse; }
  .lifestyle-col{ width: 100%; }
  .lifestyle-detail{ position: relative; top: 0; width: 100%; padding: 30px 0; }
  .lifestyle-detail .detail{ width: 100%; }

  .div-lifestyle2{ padding: 0; }
  .lifestyle-detail2{ padding: 30px 0; }
  .lifestyle-detail2 .logo{ margin-bottom: 40px; }

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

  .lifestyle-detail .title{ font-size: 44px;}

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

  .lifestyle-detail .title{ font-size: 30px;}

}

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


.divFloorplan{ display: flex; flex-flow: row wrap; width: 100%; }
.masterplan{ width: 50%; background-color: #d7c4b6; padding-top: 80px; padding-bottom: 30px; }
.unitplan{ width: 50%; background-color: #f6efe7; padding-top: 80px; padding-bottom: 30px; }


.img-masterplan{ max-width: 578px; width: 90%; margin: 0 auto; }
.img-unitplan{ max-width: 386px; width: 90%; margin: 0 auto; }

@media (max-width: 1024px){

  .masterplan, .unitplan{ width: 100%; padding-top: 50px; padding-bottom: 50px; }

}



.icn-direction{ text-align: right; padding: 20px 60px 0 0; }

.unitplan-detail .title{ font-family: var(--font-Mitr); font-size: 25px; line-height: 1.4; font-weight: 300; color: var(--primary); text-align: center; margin: 25px 0; }
.unitplan-list{ display: flex; flex-flow: row wrap; justify-content: center; gap: 20px; max-width: 500px; margin: 0 auto; }
.unitplan-item{ display: flex; align-items: center; gap: 10px; font-family: var(--font-Mitr); font-size: 20px; line-height: 1.4; font-weight: 200; color: var(--primary); }


@media (max-width: 1600px){

  .icn-direction{ padding: 20px 30px 0 0; }

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

  .unitplan-detail .title{ font-size: 20px; }
  .unitplan-item{ font-size: 16px; }

}



.unitplan-slider .swiper-button-next, 
.unitplan-slider .swiper-button-prev{ color: var(--primary);transform: rotate(90deg); right: 70px; left: auto; }
.unitplan-slider .swiper-button-prev{ top: var(--swiper-navigation-top-offset,45%); }
.unitplan-slider .swiper-button-next{ top: var(--swiper-navigation-top-offset,73%); }

.unitplan-slider .swiper-button-next:after, 
.unitplan-slider .swiper-button-prev:after{ font-size: 34px; }


@media (max-width: 767px){

  .unitplan-slider .swiper-button-next, 
  .unitplan-slider .swiper-button-prev{ display: none; }

}


.unitplan-slider .swiper-pagination{
  width: auto !important;
  right: 0 !important; left: auto !important;
  bottom: auto !important;
  top: 50% !important;
  display: flex; flex-direction: column; gap: 20px;
}
.unitplan-slider .swiper-pagination-bullet {
	padding: 0; padding-right: 30px;
	border-radius: 0;
	width: auto;
	height: auto;
	text-align: center;
	font-family: var(--font-Noto); font-size: 18px;
	color:var(--primary); font-weight: 300;
	opacity: 1;
	background: transparent;
  border: 0;
  text-align: right; position: relative;
}
.unitplan-slider .swiper-pagination-bullet-active {
	font-size: 22px; font-weight: 500;
	background: transparent;
}
.unitplan-slider .swiper-pagination-bullet::after{ content: ''; position: absolute; top: 50%; right: 0; background-color: var(--primary); width: 20px; height: 1px; }

@media (max-width: 1600px){

  .unitplan-slider .swiper-pagination-bullet{ font-size: 16px; padding-right: 20px; }
  .unitplan-slider .swiper-pagination-bullet-active{ font-size: 20px; }
  .unitplan-slider .swiper-pagination-bullet::after{ width: 15px; }

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

  .unitplan-slider .swiper-pagination{ position: relative; flex-flow: row wrap; justify-content: center; margin-bottom: 20px;}
  .unitplan-slider .swiper-pagination-bullet{ text-align: center; }
  .unitplan-slider .swiper-pagination-bullet::after{ display: none; }

}





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


.page-section--accessibility{ background-color: #657a8f; padding-top: 150px; padding-bottom: 130px; }

.accessibility-container{ display: flex; flex-flow: row wrap; width: 100%; }

.accessibility-map{ width: 66.666667%; }
.accessibility-detail{ position: relative; width: 33.333333%; padding-left: 50px; }


#divmap,
#map-canvas{ height: 800px; }
#divmap img{ object-fit: cover; object-position: center; width: 100%; height: 100%; }

.hidden { display: none; }
.visible { display: block; }

.map-btn{ display: flex; justify-content: center; align-items: center; gap: 30px; width: 100%; padding: 20px; }
.map-btn a{ display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-Noto); font-size: 23px; color: #fff; opacity: 0.5; padding: 20px 0; }
.map-btn img{ filter: var(--filter-white); width: 38px; }
.map-btn a:first-child{ border-right: 1px solid rgba(255, 255, 255, 0.4); padding-right: 30px; }
.map-btn a:hover{ opacity: 1; }
.map-btn a.active{ color: var(--gold); opacity: 1; }
.map-btn a.active img{ filter: var(--filter-gold); }


.icn-el{ position: absolute; bottom: 160px; right: 70px; }


@media (max-width: 1600px){

  .accessibility-map{ width: 60%; }
  .accessibility-detail{ width: 40%; padding-left: 20px; }

  #divmap,
  #map-canvas{ height: 600px; }

  .icn-el{ bottom: 60px; right: 50px; }

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

  .page-section--accessibility{ padding-top: 0; padding-bottom: 100px; }
  .accessibility-map{ width: 100%; }
  .accessibility-detail{ width: 100%; padding-left: 0; }

  #divmap,
  #map-canvas{ height: 680px; }

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

  .page-section--accessibility{ padding-bottom: 50px; }

  #divmap,
  #map-canvas{ height: 680px; }

  .icn-el{ bottom: 30px; right: 30px; }
  .icn-el img{ width: 250px; }

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

  #divmap,
  #map-canvas{ height: 380px; }

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

  .map-btn{ gap: 20px; }
  .map-btn img{ width: 30px; }
  .map-btn a{ font-size: 16px; padding: 10px 0; }
  .map-btn a:first-child{ padding-right: 20px; }

}


.accessibility-list{ display: flex; flex-flow: row wrap; gap: 50px 20px; }
.accessibility-item{ width: calc(50% - 10px); }
.accessibility-item h3{ font-family: var(--font-Noto); font-size: 25px; line-height: 1.4; font-weight: 400; color: var(--gold); margin-bottom: 20px; }
.accessibility-item li{ display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--font-Mitr); font-size: 16px; line-height: 1.4; font-weight: 300; color: var(--white); margin-bottom: 10px; }

@media (max-width: 1600px){

  .accessibility-item h3{ font-size: 20px; }

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

  .accessibility-list{ gap: 50px; }
  .accessibility-item{ width: calc(50% - 25px); }

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

  .accessibility-list{ gap: 30px; }
  .accessibility-item{ width: 100%; padding-right: 20px; }

}



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


.section--gallery{ background-color: #f6efe7; }


.gallery-row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
.gallery-col{
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}

.gallery-item{ display: flex; flex-direction: column; gap: 30px; }

@media (max-width: 1199px){

  .gallery-row{ margin-right: -10px; margin-left: -10px; }
  .gallery-col{ padding-right: 10px; padding-left: 10px; }
  .gallery-item{ gap: 20px; }

}



.gallery-desktop{ display: block; }
.gallery-mobile{ display: none; }


@media (max-width: 991px){

  .gallery-desktop{ display: none; }
  .gallery-mobile{ display: block; }

  .gallery-item{ aspect-ratio: 3/2; overflow: hidden;}
  .gallery-item img{object-fit: cover; object-position: center; width: 100%; height: 100%;}

}




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

.div--accordion{ max-width: 990px; width: 100%; margin: 0 auto; }



.accordion{ margin-bottom: 48px; }
.accordion .accordion-item { background-color: #f6efe7; margin-bottom: 24px; border-radius: 20px; }
.accordion .accordion-item:last-child { border-bottom: 1px solid #D7D9EA; }

.accordion button {
  position: relative;
  display: flex; justify-content: space-between; align-items: center;
  text-align: left;
  width: 100%;
  padding: 25px 50px; 
  color: var(--primary);
  font-family: var(--font-header);
  border: none;
  background: none; cursor: pointer;
  outline: none;
}

.accordion button .accordion-title{ font-family: "Mitr", sans-serif; font-size: 20px; line-height: 1.4; font-weight: 400; color: #152238; }

.accordion button .icon {
  display: inline-block;
  position: absolute;
  top: 33px; right: 20px;
  background-image: url(../images/icon/arrow-down.svg); background-repeat: no-repeat;  background-size: cover; width: 24px; height: 13px; transition: all 200ms linear; filter: var(--filter-primary);
}
.accordion button[aria-expanded='true'] .icon{
  transform: rotate(180deg); transition: all 200ms linear;
}

.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: 0 50px 25px 50px; }
.accordion-article h3{ font-family: "Mitr", sans-serif; font-size: 24px; line-height: 1.5; font-weight: 400; color: #3e5879; margin-bottom: 16px; }
.accordion-article p{ font-family: "Mitr", sans-serif; font-size: 20px; line-height: 1.5; font-weight: 300; color: #3e5879; margin-bottom: 24px; }
.accordion-article ul{ list-style: disc; margin-left: 20px; margin-bottom: 24px; }
.accordion-article ol{ list-style: decimal; margin-left: 20px; margin-bottom: 24px; }
.accordion-article li{ font-size: 20px; line-height: 1.5; font-weight: 300; color: #3e5879; }
.accordion-article p:last-child,
.accordion-article li:last-child,
.accordion-article ul:last-child,
.accordion-article ol:last-child{ margin-bottom: 0;}

.accordion-article a{ color: #213556; }



@media (max-width: 991px){

  .accordion .accordion-item{ border-radius: 16px; }
  .accordion button{ padding: 20px 40px 20px 30px; }
  .accordion button .icon{ top: 32px; right: 10px; }
  
  .accordion-article{ padding: 0 30px 20px 30px; }
  .accordion-article p,
  .accordion-article ul,
  .accordion-article ol{ margin-bottom: 16px; }

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

  .accordion button{ padding: 16px 32px 16px 24px; }
  .accordion button .icon{ width: 20px; height: 11px; top: 22px; }

  .accordion button .accordion-title,
  .accordion-article h3{ font-size: 16px; }
  .accordion-article p,
  .accordion-article li{ font-size: 16px; }

}



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

.popup-detail{ height: 100%; display: flex; flex-direction: column; margin: 15px 0; }
.popup--img{ text-align: center; }
.popup--img img{ width: 40px; }
.popup-title{ font-family: var(--font-Taviraj); font-size: var(--title); font-weight: 600; font-style: italic; color: #162238; margin-bottom: 30px; text-transform: uppercase; text-align: center; }
.popup--txt{ font-size: 20px; line-height: 1.4; font-weight: 300; text-align: center; color: #152238; padding: 0 15px; }

.popup-btn{ display: flex; justify-content: flex-end; }
.btnok{ background-color: transparent; display: block; text-align: center; padding: 10px; border: 1px solid transparent; cursor: pointer; }


/* 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: #f6efe7; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 600px; width: 90%; height: 260px; border-radius: 20px;
  display: flex; flex-direction: column; justify-content: space-between;
}
body.jw-modal-open {
  overflow: hidden;
}


.wpcf7-form-control-wrap{ display: block; }
.wpcf7-spinner{ position: absolute; top: 50%; margin: 0; margin-top: -12px; margin-left: 10px; }

.wpcf7-response-output{
  display: none !important;
}


.wpcf7-not-valid-tip{
  padding-top:15px; font-size: 12px;
}




body.logged-in.admin-bar .div-nav{ top: 32px; }
body.logged-in.admin-bar #nav-icon1{ top: calc(25px + 32px); }


@media (max-width: 782px){
  
  body.logged-in.admin-bar .div-nav{ top: 46px; }
  body.logged-in.admin-bar #nav-icon1{ top: calc(25px + 46px); }

}
@media (max-width: 767px){
  
  body.logged-in.admin-bar #nav-icon1{ top: calc(17px + 46px); }

}