@font-face {
    font-family: 'DB Helvethaica X';
    src: url('../fonts/DB-Helvethaica-X/DB_Helvethaica_X.eot');
    /* IE9 Compat Modes */
    src: url('../fonts/DB-Helvethaica-X/DB_Helvethaica_X.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/DB-Helvethaica-X/DB_Helvethaica_X.woff') format('woff'), /* Modern Browsers */
        url('../fonts/DB-Helvethaica-X/DB_Helvethaica_X.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../fonts/DB-Helvethaica-X/DB_Helvethaica_X.svg#ac36d5c78f119f40112a192d0270d625') format('svg');
    /* Legacy iOS */
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'DB Helvethaica X Li';
    src: url('../fonts/DB-Helvethaica-X/DB_Helvethaica_X_Li.eot');
    /* IE9 Compat Modes */
    src: url('../fonts/DB-Helvethaica-X/DB_Helvethaica_X_Li.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/DB-Helvethaica-X/DB_Helvethaica_X_Li.woff') format('woff'), /* Modern Browsers */
        url('../fonts/DB-Helvethaica-X/DB_Helvethaica_X_Li.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../fonts/DB-Helvethaica-X/DB_Helvethaica_X_Li.svg#073dd15db5a9a09aaf3c7597af07bf4c') format('svg');
    /* Legacy iOS */
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'DB Helvethaica X Thin';
    src: url('../fonts/DB-Helvethaica-X/DB_Helvethaica_X_Thin.eot');
    /* IE9 Compat Modes */
    src: url('../fonts/DB-Helvethaica-X/DB_Helvethaica_X_Thin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/DB-Helvethaica-X/DB_Helvethaica_X_Thin.woff') format('woff'), /* Modern Browsers */
        url('../fonts/DB-Helvethaica-X/DB_Helvethaica_X_Thin.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../fonts/DB-Helvethaica-X/DB_Helvethaica_X_Thin.svg#be9bba74669136e293d9a6d2ef86d48d') format('svg');
    /* Legacy iOS */
    font-style: normal;
    font-weight: 200;
}

html {
  scroll-behavior: smooth;
}


body {
  color: #653413!important;
  background: #b7cde0 !important;
  font-family: 'DB Helvethaica X', Helvetica, Arial, sans-serif;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: 'DB Helvethaica X', Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: #653413!important
}

p{
	line-height: 21px;
	font-size: 18px;
}

.banner .block {
    padding: 50px 0px 160px!important;
}

.sg_bg {
    background-image: url("../images/bg/LANDING_PAGE_4.png");
    background-color: #b7cde0;
    background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	min-height: 50vh;
	padding: 16px;
	margin-top: 0;
}

/*input*/
 form{padding: 30px 0px; margin: 0;} 
.form-group {position: relative;	padding-top: 5px!important;}
.form-control { 
  transition: .25s border ease-in-out;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent; 
  font-size:16pt;  
  border: 0;
  border-bottom: 1px solid #bca99d; 
  margin-bottom: 30px;
  padding-left: 0; padding-right: 0; 
  color: #87644d;
}

.form-control:focus {
  	border-bottom: 1px solid #bca99d;
	transition: .25s border ease-in-out;
	border-radius: 0 !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent;
	font-size: 16pt;
	border: 0;
	margin-bottom: 30px;
	padding-left: 0;
	padding-right: 0;
	color: #87644d;
}

input[type="email"], input[type="password"], input[type="text"], input[type="tel"] {
    border-bottom: 1px solid #bca99d;
      height:30px!important;
          font-size: 18px!important;
}

.errorMessages {
  margin-top: 50px;
  padding: 25px;
  color: #A94442;
  background: #202020;
  border: 0 !important;
  text-shadow: none !important;
  box-shadow: 0 0 10px #151515;
  text-align: center;
}

.form-control:not(.touched)+.floater:before {/*text title*/
  display: block;
  position: absolute;
  top: -20px;
  font-size: 18pt;
  color: #d2dae1;
  pointer-events: none;
  transition: .25s all ease-in-out;
}

.form-control.touched+.floater:before,
#firstname:focus+.floater:before,
#firstname:not(:placeholder-shown)+.floater:before,
#lastname:focus+.floater:before,
#lastname:not(:placeholder-shown)+.floater:before,
#mobile:focus+.floater:before,
#mobile:not(:placeholder-shown)+.floater:before,
#email:focus+.floater:before,
#email:not(:placeholder-shown)+.floater:before,
#message:focus+.floater:before,
#message:not(:placeholder-shown)+.floater:before 
{
  position: absolute;
  top: -30px;
  font-size: 16pt;
  color: #b48e6000;; 
}
 
#firstname+.floater:before,
#firstname:focus+.floater:before {
  width:100%;
  content: "ชื่อ-นามสกุล*"; 
}

#lastname+.floater:before,
#lastname:focus+.floater:before {
  width:100%;
  content: "นามสกุล"; 
}
#line+.floater:before,
#line:focus+.floater:before {
  width:100%;
  content: "Line ID"; 
}

#mobile+.floater:before,
#mobile:focus+.floater:before {
width:100%;
  content: "เบอร์โทร*"; 
}
#email+.floater:before,
#email:focus+.floater:before {
 width:100%;
content: "อีเมล์*"; 
} 
#message+.floater:before,
#message:focus+.floater:before {
  width:100%;
  content: "ข้อความ"; 
}

.form-control {
    transition: .25s border ease-in-out;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent;
    font-size: 16pt;
    border: 0;
    border-bottom: 1px solid #bca99d;
    margin-bottom: 30px;
    padding-left: 0;
    padding-right: 0;
    color: #87644d;
}

.select .select-text {
    /*appearance: none;
    -webkit-appearance: none;*/
    color: #6e4c37;
    padding-left: 0px;
    font-size: 18px;
    padding-bottom: 0px;
    padding-top: 0px;
}

.select select {
    display: inline-block;
    width: 100%;
    cursor: pointer;
    padding: 15px;
    outline: 0;
    border-radius: 0px;
    /*appearance: none;
    -webkit-appearance: none;*/
    -moz-appearance: none;
}

.select-text {
    position: relative;
    font-family: inherit;
    background-color: transparent;
    width: 100%;
    padding: 8px 10px 12px 0;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #bca99d;
}

.select select option {
    padding: 15px;
    line-height: 2.5;
    background: #f8e9d0;
    color: #000;
    font-size: 15px;
}
/****/ 



@media (max-width: 992px) {
  .sg_bg {
		min-height: 0vh;
  }
	
  .footer{
    min-height: 0px;
    background-size: cover;
	background-position: unset;
  }
}

.sg_bg-2{
	background: #b7cde0 !important;
}

.appoinment-contents img {
    width: 100%!important;
}

.text-content{
	background-color: #743d14!important;
    color: #f2e7ce!important;
    
    background-image: url("../images/bg/LANDING_PAGE_2.png");
    background-color: #b7cde0;
    background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	min-height: 50vh;
}

.text-sbk{
	 font-size: 13px;
    line-height: 15px;
} 

.sepadding-r{
	padding: 0px !important;
}

label {
    font-size: 20px !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    padding-top: 0px;
    margin-bottom: 0px!important;
 }
 
 .select-bar:before, .select-bar:after {
    content: '';
    height: 1px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: #b48e60;
    transition: 0.2s ease all;
}

.select-bar:before, .select-bar:after {
    content: '';
    height: 1px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: #b48e60;
    transition: 0.2s ease all;
}

.select-bar:before {
    left: 50%;
}

.select-bar:after {
    right: 50%;
}

.select-bar:after {
    right: 50%;
}

.not-show {
    display: none;
}

.shadow_img2{
	box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
}

.shadow_img1{
	box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(80 93 95 / 15%) !important;

}

.card {
    border: 0px solid rgba(0, 0, 0, 0);
    border-radius: 0rem;
}

.d-flex {
    display: block!important;
}

.text-white {
    color: #653413!important;
    text-align: left;
}

.card-overlay:before {
    content: "";
    position: absolute;
    height: 70%;
    width: 100%;
    bottom: 0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgb(0, 0, 0)));
    background-image: linear-gradient(180deg, transparent, rgb(0, 0, 0));
    z-index: 1;
}

.card-overlay .card-img-overlay {
    z-index: 2;
}

.card-overlay .card-image-full {
    max-height: 400px;
    object-fit: cover;
}

.card-overlay .card-text {
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.card-overlay:hover .card-text {
    margin-bottom: 10px;
}

@media (max-width: 2600px) {
	
	.banner {
	    min-height: 1220px;
	}
	
}


@media (max-width: 1924px) {
    .banner {
	    min-height: 960px!important;
	}
	
	.spantext{
		padding-left: 60px!important;
	}
	
	.footers {
	    display: none!important;
	}
	
	.displayset_m{
		display: none;
	}
	
}

@media (max-width: 1600px) {
    .banner {
        min-height: 740px !important;
    }
}

@media (max-width: 1280px) {
    .banner {
        min-height: 650px !important;
    }
    
    .displayset{
		display: block;
	}
	
	.displayset_m{
		display: none;
	}
	
	.setpadding{
		padding: 0px!important;
	}
}

@media (max-width: 820px) {
    .banner {
        min-height: 550px !important;
    }
    
    .displayset{
		display: block;
	}
	
	.displayset_m{
		display: none;
	}
	
	.setpadding{
		padding: 0px!important;
	}
}

@media (max-width: 768px) {
	.displayset{
		display: none;
	}
	.displayset_m{
		display: block;
	}
	
    .banner {
        /* background: #fff !important; */
    }
    
    .sepadding-r{
		padding: 15px !important;
	}
	
	.banner .block {
	    padding: 0px 0px 160px !important;
	}
	
	.banner p {
	    font-size: 14px;
	}	
	.spantext{
		padding-left: 0px!important;
	}
	
	.setpadding{
		padding: 10px!important;
	}
	
	.footers{
		display: block!important;
		background-image: url("../images/bg//F2-1.png")!important;
	    background-color: #743d14;    
	    background-position: center bottom;  
	    background-repeat: no-repeat;
	    background-size: cover;
	    position: relative;
	    top: -1px;
	    /*height: 34px!important;*/

	}

	.footer {
	    display: none!important;
	}
	
	.section {
	    padding: 50px 0;
	}
	
}

@media (max-width: 430px) {
	.displayset_m{
		display: block;
	}
	
}


@media (max-width: 400px) {
    .banner {
        min-height: 385px!important;
        /* background: #fff !important; */
    }
    
    .justify-content-center {
	    padding: 15px;
	}
	
	.displayset_m{
		display: block;
	}
	
}

/*********************---1-------*/
.footer {
    padding-bottom: 0px;
}
.footer {
    background: url(../images/bg/footer-bg.png) no-repeat;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    width: 100%;
    background-color: #743d14;
    height: auto;
    position: relative;
  top: -1px;
}

.footer img {
    width: 30%;
    margin-left: 20px !important;
    padding-bottom: 5px;
    margin-top: 10px;
}

.tel{
	padding-bottom: 0px;
    padding-right: 20px;
    padding-top: 10px;
}

.footer-btm{
  border-top: 0 !important;
  box-shadow: none !important;
}

.backtop{
  position: fixed;
  right: 35px;
  bottom: 35px;
  z-index: 9999;

  width: 58px;
  height: 58px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  /* Champagne Gold Gradient */
  background: linear-gradient(135deg,#f0d27f,#d4b15a,#b8963d);

  color: #ffffff;
  font-size: 18px;

  box-shadow:
    0 10px 30px rgba(184,150,61,0.35),
    inset 0 1px 2px rgba(255,255,255,0.3);

  transition: all 0.35s ease;
}

.backtop:hover{
  transform: translateY(-6px);

  background: linear-gradient(135deg,#f5db95,#e0be6b,#c6a75e);

  box-shadow:
    0 18px 40px rgba(184,150,61,0.5),
    0 0 18px rgba(255,215,120,0.5);
}

.backtop{
  opacity: 0;
  visibility: hidden;
}

.backtop.show{
  opacity: 1;
  visibility: visible;
}