body, html {overflow-x: hidden;}
body {font-family: 'archivo', 'Noto Sans Thai', sans-serif; padding-top: 70px; color:#555; 
  font-size:18px; line-height:28px; font-weight: 400; letter-spacing: 0.15px; background-color: #fff;}

h3, .h3, h2, .h2, h1, .h1 {font-family: 'copperplate_gothic_boldRg', 'Noto Sans Thai', serif; color:#231f20; letter-spacing: 0.5px;}
h6, .h6, h5, .h5, h4, .h4 {font-family: 'archivo', 'Noto Sans Thai', serif; color:#231f20; letter-spacing: 0.5px;}

h1, .h1 {font-size: 55px; line-height: 70px; font-weight: 600;}
h2, .h2 {font-size: 48px; line-height: 60px; font-weight: 600;}
h3, .h3 {font-size: 28px; line-height: 38px; font-weight: 600;}
h4, .h4 {font-size: 22px; line-height: 32px; font-weight: 600;}
h5, .h5 {font-size: 20px; line-height: 28px;}
h6, .h6 {font-size: 17px; line-height: 24px; letter-spacing: 2px; font-weight: 600;}


.bg-dark {background-color: #000 !important;}

b, strong {
  font-weight: 700;
}


p {margin-bottom: 1.5rem;}
a {
  color: #000;
  text-decoration: none;
}
a:hover {
  color: #2ac4f4;
}

.lead {font-size: 20px; line-height: 30px; font-weight: 400;}


.text-primary {color:#0087e3 !important;}
.text-danger {color:#e61a2d !important;}
.text-green {color:#20a753 !important}
.text-lightblue  {color:#00b8e8 !important}
.small {font-size:11px; line-height: 13px;}
.smaller {font-size:10px; line-height: 12px;}
.bg-light {background-color: #e9eced;}
.bg-lightblue {background-color: #cbe8ff;}


.alert-primary {
  color: #000;
  background-color: #cbe8ff;
  border-color: #cbe8ff;
}

.btn {border-radius: 100px;}
.btn-lg {padding: 1.15rem  1.8rem; font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;}

.btn-success {background-color: #20a753; border-color: #20a753; }
.btn-success:hover, .btn-success:focus {background-color: #29d55e; border-color: #29d55e;}

.btn-danger {background-color: #e90000; border-color: #e90000; }
.btn-danger:hover, .btn-danger:focus {background-color: #ff1c1c; border-color: #ff1c1c;}


.navbar-brand img {width:150px; height:auto;}
#mainNav {height:65px; font-family: 'archivo', 'Noto Sans Thai', sans-serif; letter-spacing:0.2px; transition: 0.3s ease-in-out; font-weight: 500; font-size: 17px;}
#mainNav.navbar-shrink {background-color: #fff;  height:65px;  padding-top: 0;  padding-bottom: 0; box-shadow: 0px 0px 5px 5px rgba(200,200,200,0.5);}
#mainNav .navbar-nav li.nav-item a.nav-link {color:#231f20; position:relative;}
#mainNav .navbar-nav li.nav-item a.nav-link:active, #mainNav .navbar-nav li.nav-item a.nav-link:hover, #mainNav .navbar-nav li.nav-item a.nav-link:focus,
#mainNav .navbar-nav li.nav-item.active a.nav-link {color: #20a753;}

#mainNav .navbar-toggler{font-size:20px; padding: 0; right:125px; top:12px; border:none;}
.navbar-toggler:focus {border:none; box-shadow: none;}

.language {top:20px; right:15px;}
.language ul {list-style: none; margin:0; padding:0;}
.language li {float:left; margin:0 7px;}
.flag {width:32px; height:32px; display: block; background-image: url('../images/flag.png'); background-size: 70px; background-repeat: no-repeat;}
.flag-th {background-position: 0 0;}
.flag-en {background-position: -38px 0;}

.pre-heading {position:relative; display:inline-block; color:#20a753; text-transform: uppercase; letter-spacing: 3px; font-weight: 600; padding-left:35px; padding-right:35px;}
.pre-heading::before, .pre-heading::after {position:absolute; width:20px; height: 3px; background-color: #20a753; display: block; content:""; top:12px;}
.pre-heading::before {left:0;}
.pre-heading::after {right:0;}

.image-mask, .video-mask {overflow: hidden; border-radius: 40px; position: relative;}
.image-mask:hover ::before, .video-mask:hover ::before{position:absolute; background-color: rgba(0, 0, 0, 0.2); width: 100%; height:100%; display: block; z-index: 1; content:"";}

.image-mask:hover ::after {position:absolute; background-image: url('../images/icon_enlarge.png'); width: 80px; height:80px; display: block; z-index: 2; content:""; top:calc((100% - 80px) / 2); left:calc((100% - 80px) / 2);}
.video-mask::after {position:absolute; background-image: url('../images/icon_play.png'); width: 80px; height:80px; display: block;  content:""; top:calc((100% - 80px) / 2); left:calc((100% - 80px) / 2);}

.fancybox-content {width:450px !important; height:800px !important;}

.alert-pleasenote {padding-left:85px; font-size:16px; line-height: 24px; border-radius: 12px;}
.alert-pleasenote::before {position:absolute; background-image: url('../images/icon_pleasenote.png'); width: 60px; height:60px; display: block; z-index: 2; content:"";
top:6px; left:15px;}

.page-section.hero-section {overflow:hidden; color:#fff; background-size: cover; padding:0; background-image: url('../images/hero_bg.jpg'); 
  position:relative; text-shadow: 2px 2px 2px rgba(0,0,0,0.65)}

.page-section.hero-section img.hero-image1 {position: absolute; width:420px; top:50px; left:30px; }
.page-section.hero-section img.hero-image2 {position: absolute; width:350px; bottom:20px; right:30px; }
.page-section.hero-section p {position:relative; font-size:26px; line-height: 40px; z-index: 1;}
.page-section.hero-section h1 {position:relative; z-index: 1}

#products table{line-height: 1.3;}
#products td, #products tr, #products th {border:2px solid #000; font-weight: bold; color:#000;}
#products td, #products th {padding:5px 10px;}
#products th{ font-size:14px; font-weight: bold; }
#how-to-use .badge {letter-spacing: 3px; font-size:15px; line-height: 24px;}

.owl-theme .owl-nav {text-align: unset !important; display: flex; justify-content: space-between; margin-top: 0 !important;}
.owl-theme .owl-prev  {font-size: 70px !important; line-height: 50px !important; color: #fff !important; position: absolute; top: 50%; left: 10px; transform: translate(0,-60%);}
.owl-theme .owl-next  {font-size: 70px !important; line-height: 50px !important; color: #fff !important; position: absolute; top: 50%; right: 10px; transform: translate(0,-60%);}
.owl-theme .owl-nav [class*="owl-"]:hover {background: unset !important;}

.owl-theme .owl-dots {margin-top: 20px; position: absolute;  bottom: -50px;}
.owl-theme .owl-dots .owl-dot span {width: 15px !important; height: 15px !important;}
.owl-theme .owl-dots .owl-dot.active span {background: #2ac4f4 !important; width: 15px !important; height: 15px !important;}
.owl-theme .owl-nav.disabled + .owl-dots {margin-top: 30px !important;}

footer{font-size:15px; line-height: 24px; padding:0 0 30px; background-color: #000; color:#aaa;}
footer::before {content: "";
  background-image: url(../images/bg-footer.png);
  width: 100%;
  height: 90px;
  display: block;
  background-size: cover;
  margin-bottom: 30px;
}
.logo-footer {width: 200px;}
.social-links{width: 240px;  display: block;  height: 50px;}
.social-links ul {padding:0; margin:0; list-style: none; margin-bottom:10px;} 
.social-links li a {width:50px; height:50px; display: block; float: left; border-radius: 40px;  text-align: center; margin: 0 4px; color:#fff; background-color: #20a753;}
.social-links li a:hover {background-color: #29d55e;}
.icons {background-image: url('../images/icons.png'); background-size: 50px; width:50px; height: 50px; display:block;}
.icons.icon-fb {background-position: 0 0;}
.icons.icon-line {background-position: 0 -50px;}
.icons.icon-whatsapp {background-position: 0 -100px;}
.icons.icon-youtube {background-position: 0 -150px;}


.form-control {border-radius: 0; background-color: #f2f2f2; border-color:#eee; font-size: 16px; padding:.525rem .725rem !important;}
.form-label {color:#000;}

.form-control:focus {
  background-color: #fff;
  border-color: #2ac4f4;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(42, 196, 244, 0.25);
}

.btn-check:focus + .btn-primary, .btn-primary:focus, .btn-check:checked + .btn-primary:focus,
.btn-check:active + .btn-primary:focus, .btn-primary:active:focus, 
.btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus 
{box-shadow: 0 0 0 0.25rem rgba(196, 154, 108, 0.25);}

.welcome-section h1 {letter-spacing: 0;}
.welcome-section p {font-size:22px; line-height: 32px; letter-spacing: 0.5px;}

.cookie-overlay  {font-size:14px; line-height: 18px;}

@media (min-width: 768px){
  .navbar-brand img {width:200px; height:auto;}
  .page-section.hero-section .container, .page-section.hero-section .row {height:100%;}
}
@media (min-width: 992px){
  .navbar-brand img {width:200px; height:auto;}
  .navbar-shrink .navbar-brand img {width:175px; height:auto;}
  .page-section.hero-section{height:calc(100vh - 90px); max-height: 700px; min-height: 650px;}


  /*.page-section.welcome-section{height:calc(100vh - 90px); max-height: 700px;} 
  .page-section.welcome-section .container, .page-section.welcome-section .row {height:100%;}*/
  
  .services-section { min-height: 720px; overflow: hidden; }
  .services-bg {background-position:100% 50%; color:#fff; height:100%; width:100%; top:0; right:0; position:absolute;
    background-image: url('../images/services-img.jpg'); background-repeat: no-repeat; background-size: cover; }
  .services-bg::before {content:""; position:absolute; background: rgb(19,39,135);
    background: linear-gradient(90deg, rgba(19,39,135,1) 80%, rgba(19,39,135,0) 100%);  width:60%; height:100%; display: block; z-index: 0;}
  .welcome-section img {max-width: 360px;}
}

@media (min-width: 1200px){
  .navbar-brand img {width:256px; height:auto;}  
  #mainNav .navbar-nav {margin-right:100px !important;}
  .page-section {padding:70px 0;}
  .page-section.welcome-section {padding:30px 0;}
  #mainNav {height:90px; }
  body{padding-top: 90px;}
  .welcome-section img {max-width: 420px;}
  .page-section.hero-section img.hero-image1 {left:-15px;}
  .page-section.hero-section img.hero-image2 {right:-15px;}
}

@media (min-width: 1350px){
.welcome-section img {max-width: 475px;}
.page-section.hero-section img.hero-image1 {left:30px;}
.page-section.hero-section img.hero-image2 {right:30px;}
}

@media (max-width: 1199px){
  h1, .h1 {font-size: 44px; line-height: 56px;}
  h2, .h2 {font-size:40px; line-height: 50px;}
  .welcome-section p {font-size:20px;}
  #mainNav .container{max-width:100%;}
  .language {top:12px;}

  .navbar-collapse {width: 100%;  position: absolute;  top: 68px;  left: 0px;  background: rgba(255, 255, 255, 0.95); }
  .page-section {padding:50px 0;}
  .navbar-nav {box-shadow: 0px 10px 10px 5px rgba(200,200,200,0.3); }
  .alert-pleasenote::before {top:15px;}

  .page-section.hero-section img.hero-image1 {left:-80px; width:400px;}
  .page-section.hero-section img.hero-image2 {right:-30px; width:350px;}
  .page-section.hero-section p {font-size:24px; line-height: 36px;}
  .page-section.hero-section h1 {font-size:50px; line-height: 60px;}


}

@media (max-width: 991px){
 h1, .h1 {font-size: 33px; line-height: 40px;}
 h3, .h3 {  font-size: 24px;  line-height: 36px;}
.page-section {padding:40px 0;}
 body {padding-top: 70px; font-size:15px; line-height: 24px;}
.navbar-collapse {top: 50px;}
.language {top:7px;}
.page-section.hero-section {min-height:550px;}
#mainNav .navbar-toggler {top:7px;}


.page-section.hero-section img.hero-image1 {width:350px; top:30px; left:-30px;}
.page-section.hero-section img.hero-image2 {width:280px; bottom:20px; right:0px;}
.page-section.hero-section p {font-size:22px; line-height:32px;}
.page-section.hero-section h1 {font-size:42px; line-height: 50px;}

.gmap {height:450px; width:100%;}


}

@media (max-width: 767px){
h1, .h1 {font-size: 36px; line-height: 44px;}
h2, .h2 {  font-size: 32px;  line-height: 42px;}
h3, .h3 {  font-size: 20px;  line-height: 32px;}
h5, .h5 {  font-size: 18px;  line-height: 28px;}
.lead {    font-size: 18px;    line-height: 28px;}
.welcome-section {padding:0;}
#contact.page-section {padding-bottom:0;}
.welcome-section p {font-size:18px; line-height: 28px;}
.welcome-section img {max-width: 250px;}

.page-section.hero-section img.hero-image1 {width:280px; top:220px;}
.page-section.hero-section img.hero-image2 {width:230px;}
.page-section.hero-section p {font-size:22px; line-height:32px;}
.page-section.hero-section h1 {font-size:32px; line-height: 40px;}
}

@media (max-width: 575px){
  h1, .h1 {font-size: 34px; line-height: 44px;}
  h2, .h2 {font-size: 26px; line-height: 36px;}
  h3, .h3 {font-size: 18px; line-height: 28px;}
  h4, .h4 {font-size: 20px; line-height: 30px;}
  h5, .h5 {font-size: 14px; line-height: 20px;}
  h6, .h6 {font-size: 14px; line-height: 20px;}
  .btn-lg {padding: 0.7rem 1.2rem; font-size:15px;}
  footer {font-size:14px;}
  .fancybox-content {width:390px !important; height:693px !important;}

  .page-section.hero-section img.hero-image1 {width:250px; top:250px;}
.page-section.hero-section h1 {font-size:28px; line-height: 34px;}
.page-section.hero-section p {font-size:18px; line-height:26px;}

  
}

@media (max-width: 428px){
  h1, .h1 {font-size: 32px; line-height: 38px;}
   .btn-lg {padding: 0.5rem 1rem; font-size:14px;}
  .fancybox-content {width:360px !important; height:640px !important;}
    .page-section.hero-section img.hero-image1 {width:200px; top:250px; left:-30px;}
    .page-section.hero-section img.hero-image2 {width:200px; right:-15px;}
    .page-section.hero-section h1 {font-size:24px; line-height:30px;}
  .page-section.hero-section p {font-size:14px; line-height:20px;}

}

@media (max-width: 380px){
  .welcome-section h4 {font-size:14px;}
  .fancybox-content {width:330px !important; height:587px !important;}
  
  
}