/* Regular */
@font-face {
    font-family: 'fmain-book';
    src: url('assets/fonts/CamptonBook.woff') format('woff'); 
}
@font-face {
    font-family: 'fmain-medium';
    src: url('assets/fonts/CamptonMedium.woff') format('woff');
}
@font-face {
    font-family: 'fmain-bold';
    src: url('assets/fonts/CamptonSemiBold.woff') format('woff');
}
 
 .fmain-b{
    font-family: 'fmain-book';
 }
 .fmain-m{
    font-family: 'fmain-medium';
 }
 .fmain-sb{
    font-family: 'fmain-bold';
 }
 .point{
    font-size: 16px;
    transform: translate(0, -12px);
    margin-right: 10px;
    margin-left: 10px;
 }
 .logo img{
    width: 140px;
    padding-top: 15px;
    padding-bottom: 15px;
 }
 .sticky-menu .logo img{
   
      width: 60px!important;
      padding-top: 10px;
      padding-bottom: 10px;
  
 }
 .btn-main{
   background: #90D1BB!important;
   border: 1.3px solid #90D1BB!important;
 }
.fgold{
   color:#8C734B!important;
   font-size: 18px!important;
}
.fgreen{
   color:#288167!important;
}
.img100{
   width: 100%;
}
.sec2 b{
   font-family: 'fmain-bold';
   color: #819990;
}
.sec2 span{
   color: black;
}
.sec2 p{
   color: #819990;
   font-size: 14px;
}
.sec2{
   margin-bottom: 12px;
}
.bg1{
   background-color: #EEF8F5;
}
.bg2{
   background-color: #288167;
}
.fwhite{
   color: white;
}
.listfeatures span{
   margin-right: 10px;
}
.listfeatures p{
   color: white;
    font-size: 16px;
    margin-left: 0;
}
.location{
   background-color: #EDE9E3;
}
.location h2{
   color: #8C734B;
   font-family: 'fmain-medium';

}
.location h3{
   color: #288167;
   font-family: 'fmain-medium';
   font-size: 24px;

}
.location p{
   font-size: 14px;
}
.location .divrow{
   margin-bottom: 30px;
}
.divcontact{
   background-color: #C5DDD5;
   padding: 70px ;
}
.divbg{
   background-image: url(assets/img/9.jpg);
   background-size: cover;
    background-position: top center;
}
.footer-logo img{
   width: 170px;
}
.amail{
	text-decoration: underline;

}
.footer-bg a,.footer-bg b,.footer-bg p,.footer-bg span{
   color:white!important;
}
.ml-40{
   margin-left: 40px;
}
.headsocial a{
   font-size: 20px;
    color: white;
    margin-right: 10px;
}
.sticky-menu .headsocial a{
   color: var(--tg-primary-color);
}
.headflag{
   margin-left: 35px;
}
.headflag img{
    width: 22px;
}
 .fc1{
   color: #80807E!important;
 }
 .fc2{
   color: #819990!important;
 }
 .div501,.div502{
   width: 50%;
 }
 .gallery-area .slick-dots {
   position: absolute;
   bottom: -40px; /* ปรับตำแหน่งด้านล่าง */
   width: 100%;
   display: flex;
   justify-content: center; /* จัดกึ่งกลาง */
   list-style: none;
   padding: 0;
   margin: 0;
}

.gallery-area .slick-dots li {
   margin: 0 5px; /* เว้นระยะห่างระหว่างจุด */
}

.gallery-area .slick-dots li button {
   border: none;
   background: none; /* ปิดพื้นหลังปุ่ม */
   cursor: pointer; /* เปลี่ยนเคอร์เซอร์ */
   padding: 0;
   font-size: 0; /* ซ่อนตัวเลข */
}

.gallery-area .slick-dots li button:before {
   content: ''; /* ลบตัวเลข */
   display: block;
   background-color: #ccc; /* สีพื้นหลังของจุด */
   border-radius: 50%; /* ทำให้เป็นวงกลม */
   width: 10px; /* ขนาดของจุด */
   height: 10px; /* ขนาดของจุด */
}

.gallery-area .slick-dots li.slick-active button:before {
   background-color: #333; /* สีของจุดเมื่อใช้งาน */
}

.usetop img{
   padding:10px;
}
.dpre {
   white-space: pre-line;
   display: block;
}

.dpre img,
.dpre iframe {
   max-width: 100%;
}
.head-rs .navbar-wrap ul li a{
   font-size: 15px;
}
.lang-ch .vision-content p{
   font-size: 13.7px;
}
@media (min-width: 1500px) {
   .head-ch .navbar-wrap .navigation.right {
      padding-right: 80px;
  }
  
}
@media (max-width: 1500px) {
   .head-rs .navbar-wrap ul li a{
      font-size: 12px;
     }
     .head-rs .navbar-wrap ul li a {
      padding: 38px 10px;
   }
}
@media (max-width: 1280px) {
   .navbar-wrap ul li a{
      font-size: 13px;
   }
   .navbar-wrap ul li a {
      padding: 38px 13px;
  }
}
@media (max-width: 1194px) {
   .mb-none{
      display: none;
   }
   .sticky-menu .headflag img{
      width: 26px!important;
    }
   .headflag img{
      width: 26px!important;
    }
    .headflag{
      display: inline-block;
      position: absolute;
      right: 120px;
      top: 32px;
    }
    .sticky-menu .headflag{
      display: inline-block;
      position: absolute;
      right: 120px;
      top: 21px;
    }
   
}
@media (min-width: 769px) {
   #about .container,#villas .container,.mission-area .container,.plan-area .container,.project-area .container,.footer-area .container{
      max-width: 1127px;
   }
   .dt-hide{
      display: none;
   }
   .mb-hide{
      display: block;
   }
}
 
@media (max-width: 769px) {
   .usetop img{
      padding:5px 0;
   }
   .dt-hide{
      display: block;
   }
   .mb-hide{
      display: none;
   }
   .container{
      max-width: 96%;
   }
   .list-wrap li{
      font-size:15px;
   }
   .contact-form-wrap .form-grp{
      margin-bottom: 16px;
   }
   .contact-form-wrap .form-submit{
      margin-top: 25px;
   }
   .divbg{
      background-image: url(assets/img/9-1.jpg);
      background-size: contain;
       background-position: top center;
   }
   .logo img{
      padding-top: 0!important;
   }
   .sticky-menu .headflag img{
      width: 26px!important;
    }
   .headflag img{
      width: 26px!important;
    }
    .headflag{
      display: inline-block;
    position: absolute;
    right: 60px;
    top: 47px;
    }
    .sticky-menu .headflag{
      display: inline-block;
        position: absolute;
        right: 60px;
        top: 31px;
    }
   .pd-t0{
      padding-top: 0px;
   }
   .point{
      font-size: 12px;
    transform: translate(0, -7px); 
   }
   .fgold{
      font-size: 16px!important;
   }
   .project-style-four .section-title{
      margin-bottom: 25px;
   }
   .mb-50{
      margin-bottom: 30px;
   }
   .mission-content p{
      margin-bottom: 25px;

   }
   .listfeatures p{
      font-size: 14px;
      margin-left: 5px;
   }
   .listfeatures img{
      width: 15px;
   }
   .project-area{
      padding-bottom: 25px;
   }
   .direction-content{
      padding: 20px 40px;
   }
   .usetop .section-title .title{
      font-size: 18px!important;
   }
}

@media (max-width: 360px) {
   .about-content p{
      font-size: 14px;
   }
   #about .section-title .title, #villas .section-title .title, .mission-content .section-title .title, #location .section-title .title{
      font-size: 20px;
   }
   .mission-content p{
      font-size: 14px;
   }
   .mission-area2 .section-title .title{
      font-size: 16px;
   }
   .listfeatures p {
      font-size: 13px;
      margin-left: 0px;
  }
  .vision-content p{
   font-size: 13px;
  }
  .location h3{
   font-size: 22px;
  }
  .location p {
   font-size: 12px;
}
.section-title .title{
   font-size: 20px;
}
.usetop .section-title .title{
   font-size: 18px!important;
}
}
@media (max-width: 320px) {
   .logo img {
      width: 80px !important;
  }
  .menu-area .mobile-nav-toggler{
   font-size: 24px!important;
  }
  .headflag img {
   width: 22px !important;
}
.headflag img{
   margin-right: 5px!important;
}
   .banner-content .title {
      font-size: 20px!important; 
  }
  .btn {
   padding: 12px 18px!important;
   font-size: 12px!important;
}
.fgold{
   font-size: 14px!important;
}
  #about .section-title .title, #villas .section-title .title, .mission-content .section-title .title, #location .section-title .title{
   font-size: 18px!important;
  }
  .about-content p{
   font-size: 12px!important;
  }
  .sec2 p{
   font-size: 12px!important;
  }
  .sec2 span{
   font-size: 13px!important;
  }
  .sec2 b{
   font-size: 13px!important;
  }
  .mission-content p{
   font-size: 12px!important;
  }
  .mission-area2 .section-title .title{
   font-size: 14px!important;
  }
  .section-title .title{
   font-size: 18px!important;
  }
  .plan-wrap .nav-tabs .nav-link{
   font-size: 12px!important;
  }
  .listfeatures p{
   font-size: 12px!important;
   margin-left: 0px!important;
  }
  .vision-content p{
   font-size: 12px!important;
  }
  .location h3{
   font-size: 20px!important;
  }
  .location p{
   font-size: 12px!important;
  }
  .direction-content {
   padding: 20px 25px;
}
.footer-logo img{
   width: 140px;
}
.fw-title {
   margin-bottom: 10px;
   font-size: 16px;
}
.usetop .section-title .title{
   font-size: 16px!important;
}
}
 
@media (max-width: 295px) {
   .mission-content .section-title .title{
      font-size: 16px!important;

   }
   .mission-area2 .section-title .title{
      font-size: 14px!important;
   }
   .mission-content .dpre{
      white-space: normal;
   }
   .usetop .section-title .title{
      font-size: 16px!important;
   }
}