@font-face {
    font-family: 'Kanit-Regular';
    src: url('../fonts/Kanit-Regular.ttf');
    src: url('../fonts/Kanit-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
	font-display: swap;

}

@font-face {
    font-family: 'Kanit-Medium';
    src: url('../fonts/Kanit-Medium.ttf');
    src: url('../fonts/Kanit-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
	font-display: swap;

}

a[href^=tel] { color: inherit; text-decoration: none; }


h1, h2, h3, h4, h5, h6, .heading{
	margin: 5px 0;
	color:#000000;
	font-weight:normal;
	font-family: 'Kanit-Medium', Arial, Helvetica, sans-serif;
}

.txt-xxl{
font-size:2.6em;
}
.txt-xl{
font-size:2.3em;
}
.txt-l{
font-size:2em;
}
.txt-m{
font-size:1.7em;
}
.txt-s{
font-size:1.4em;
}


body{
	font-weight:normal;
	font-family: 'Kanit-Regular', Arial, Helvetica, sans-serif;
	font-size:1.2em;
	background:#a4d7ff;
}

.bgdark{
	background-color:#022d63;
	padding: 20px;
}

.bglight{
	padding: 20px;
}

.light-txt, .light-txt p, .light-txt li, .light-txt a, .light-txt label {
	color:#ffffff;
}

.light-txt h1, .light-txt h2, .light-txt h3, .light-txt h4, .light-txt h5, .light-txt h6, .light-txt .heading{
	color:#ffc800;
}


.dark-txt, .dark-txt p, .dark-txt li, .dark-txt a, .dark-txt label{
	color:#000000;
}

.dark-txt h1, .dark-txt h2, .dark-txt h3, .dark-txt h4, .dark-txt h5, .dark-txt h6, .dark-txt .heading{
	color:#0c518f;
}


.navbar {
}

.navbar-scrolled {
  background-color: transparent !important;
}

.navbar-brand {
    color: #fff;
    background: linear-gradient(-225deg, #0029ff 0%, #10377a 29%, #0c0796 67%, #0029ff 100%);
    border-radius: 0px 0px 10px 10px;
    padding: 10px;
	margin-left:auto;
	margin-right:auto;
    margin-top: -8px;
    font-size: 1.8rem;
	font-family: 'Kanit-Medium', Arial, Helvetica, sans-serif;
	border-width: 0px 4px 4px 4px;
    border-color: #ffc800;
    border-style: solid;
}

main {
    margin-top: 70px;
}

.content-1{
	margin-bottom:30px;
    margin-top: 100px;
}


.heading-bg {
    background: linear-gradient(to right, #fa709a66 0%, #fee14029 100%);
    padding: 5px 11px;
}

.animated-border-box,
.animated-border-box-glow {
    max-height: fit-content;
    max-width: 100%;
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    z-index: 0;
    border-radius: 10px;
    padding: 20px;
}

.animated-border-box-glow {
  overflow: hidden;
  /* Glow Blur */
  filter: blur(20px);
}

.animated-border-box:before,
.animated-border-box-glow:before {
  content: "";
  z-index: -2;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  position: absolute;
  width: 99999px;
  height: 99999px;
  background-repeat: no-repeat;
  background-position: 0 0;
  /*border color, change middle color*/
  background-image: conic-gradient(
    rgba(0, 0, 0, 0),
    #ffc800,
    rgba(0, 0, 0, 0) 25%
  );
  /* change speed here */
  animation: rotate 4s linear infinite;
}

.animated-border-box:after {
  content: "";
  position: absolute;
  z-index: -1;
  /* border width */
  left: 5px;
  top: 5px;
  /* double the px from the border width left */
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  /*bg color*/
  background: linear-gradient(-225deg, #000c2e 0%, #10377a 29%, #0c0796 67%, #0029ff 100%);
  /*box border radius*/
  border-radius: 7px;
}

@keyframes rotate {
  100% {
    transform: translate(-50%, -50%) rotate(1turn);
  }
}


.diagonal {
  color: #fff;
  padding: 70px;
  position: relative;
  margin: 10px;
  float: left;
  background: linear-gradient(-225deg, #000c2e 0%, #10377a 29%, #0c0796 67%, #0029ff 100%);
}

div.diagonal:before,
div.diagonal2:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 80px solid #a4d7ff;
  border-right: 80px solid transparent;
  width: 0;
}





#schemacss{
	text-align:center;
    clear: both;
	color:#ffffff;
}

#schemacss a, #schemacss span.title-color{
font-weight:bold;
}

#schemacss .txt-s{
margin:0;
color: #ffffff;
}

.schema_add_map div {
display: inline;
}

.schema_contact, .schema_contact h3, .schema_contact a {
	color:#000000 !important;
	background: none !important;
    box-shadow: none !important;
}

.footer{
	padding: 20px 0px;
}

.footer .container .row {
	text-align:center;
}



.copy {
    padding: 20px 10px;
    font-size: 1.2em;
	text-align:center;
	margin:10px 0;
}
@media (max-width: 319px) {
	
}
@media (min-width: 320px) and (max-width: 399px) {

}
@media (min-width: 400px) and (max-width: 767px) {
	.footer{
		text-align:center;
	}
	#schemacss{
		text-align:center;
	}
	.copy {
		display:block;
		float:none;
		text-align:center;
    	border-radius: 20px;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	
}
@media (min-width: 992px) and (max-width: 1199px) {

}
@media (min-width: 1200px) {

}