/* Body styles */
body {
  background-color: #FFF; /* พื้นหลังสีดำ */
  color: #000; /* ตัวหนังสือสีขาว */
  font-family: "Kanit", serif;
  font-weight: 300;
  font-style: normal;
  font-size:16px;
}

.kanit-thin {
  font-family: "Kanit", serif;
  font-weight: 100;
  font-style: normal;
}

.kanit-extralight {
  font-family: "Kanit", serif;
  font-weight: 200;
  font-style: normal;
}

.kanit-light {
  font-family: "Kanit", serif;
  font-weight: 300;
  font-style: normal;
}

.kanit-regular {
  font-family: "Kanit", serif;
  font-weight: 400;
  font-style: normal;
}

.kanit-medium {
  font-family: "Kanit", serif;
  font-weight: 500;
  font-style: normal;
}

.kanit-semibold {
  font-family: "Kanit", serif;
  font-weight: 600;
  font-style: normal;
}

.kanit-bold {
  font-family: "Kanit", serif;
  font-weight: 700;
  font-style: normal;
}


/* Navbar styles */
.navbar {
  position: absolute;
  width: 100%;
  top: 0;
  background-color: transparent;
  transition: background-color 0.3s ease, border-bottom 0.3s ease;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3); /* ขอบล่างสีดำโปร่งแสง 30% */
  background-color: rgba(255, 255, 255, 0.6);
  z-index: 1000;
}

.navbar.sticky {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.9);
  border-color: #114a8a; /* เปลี่ยนขอบล่างเป็นสีทองเมื่อ sticky */
}
 

.navbar .nav-link {
  color: #114a8a; /* ลิงก์ใน navbar เป็นสีทอง */
  transition: color 0.3s;
}

.navbar .nav-link:hover {
  color: #535353; /* ลิงก์เปลี่ยนเป็นสีขาวเมื่อ hover */
}

.txtex{
	color: #114a8a;
}

/* Links styles */
a {
  color: #114a8a; /* ลิงก์ทั่วไปเป็นสีทอง */
  text-decoration: none;
}

a:hover {
  color: #535353; /* ลิงก์เปลี่ยนเป็นสีขาวเมื่อ hover */
}


/* ปรับไอคอนเบอร์เกอร์เมนูให้เป็นสีน้ำเงินเข้ม #104a8a และเส้นหนาขึ้น */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23104a8a' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 6h22M4 15h22M4 24h22'/%3E%3C/svg%3E");
  width: 35px;
  height: 35px;
}

/* ปรับสไตล์ของปุ่มเบอร์เกอร์เมนู */
.navbar-toggler {
  border: none;
  padding: 10px;
}

/* ลบกรอบเมื่อคลิกที่เบอร์เกอร์เมนู */
.navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

/* เปลี่ยนสีพื้นหลังเมื่อเปิดเมนู */
.navbar-toggler[aria-expanded="true"] {
  background-color: rgba(16, 74, 138, 0.1);
  border-radius: 5px;
  transition: background-color 0.3s ease;
}


/* Floating contact and back-to-top buttons */
.contact-button {
  position: fixed;
  right: 20px;
  bottom: 20px;
  color: #FFF;
  background-color: #114a8a;
  border: 2px solid #114a8a;
  padding: 10px 20px;
  border-radius: 5px;
  z-index: 1000;
  text-decoration: none;
}

.contact-button:hover {
  color: #114a8a;
  background-color: #FFF;
  border-color: #114a8a;
}

.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 90px; /* ปรับตำแหน่งเป็น 90px */
  background-color: #FFF;
  color: #114a8a;
  border: 2px solid #114a8a;
  padding: 10px 15px;
  border-radius: 50%;
  z-index: 1000;
  display: none;
  text-align: center;
}

.back-to-top i {
  font-size: 24px; /* ขนาดไอคอน */
}

.back-to-top:hover {
  background-color: #114a8a;
  color: #FFF;
  border-color: #114a8a;
}

/* Carousel full height */
.carousel-item {
  position: relative;
  z-index: 1;
}

.carousel-caption {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  z-index: 999; /* เพื่อให้แน่ใจว่าข้อความอยู่เหนือ overlay */
}

.carousel-item img {
  height: 100vh; /* ให้สไลด์โชว์สูงเต็มจอ */
  object-fit: cover; /* ครอบคลุมภาพเต็ม */
}

.carousel-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-color: rgba(0, 0, 0, 0.6); Overlay สีดำความโปร่งแสง 0.6 */
  z-index: 1; /* ให้ overlay อยู่เหนือรูป */
}

.carousel-item img {
  z-index: 0; /* ให้ภาพอยู่ใต้ overlay */
}

/* Footer styles */
footer {
  background-color: #000; /* พื้นหลัง footer เป็นสีดำ */
  color: #114a8a; /* ข้อความสีทอง */
  padding: 20px 0;
  text-align: center;
  border-top: 1px solid #114a8a;
}

footer a {
  color: #114a8a; /* ลิงก์ใน footer เป็นสีทอง */
  text-decoration: none;
}

footer a:hover {
  color: #535353; /* ลิงก์เปลี่ยนเป็นสีขาวเมื่อ hover */
}


.ts_top, .ts_mid, .ts_bottom, .ts_low, .ts_btn { 
  z-index: 999;
  margin-bottom: 10px;
  text-align:left;
}

.ts_top {
  font-size: 16px;
  color: #535353; 
}

.ts_mid {
  font-size: 50px;
  color: #114a8a;
  font-weight:bold;
  margin-bottom: 10px; 
}

.ts_bottom {
  font-size: 28px;
  color: #535353; 
}

.ts_low {
  font-size: 16px;
  color: #535353;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .ts_mid {
	  font-size: 32px; 
	}

	.ts_bottom {
	  font-size: 22px; 
	}
}

.ts_btn { 
  color: #114a8a;
  z-index: 2; 
  border:2px solid #114a8a;
}
.ts_btn hover { 
  background-color: #FFF; 
}

.service-list {
  list-style-type: none;
  padding-left: 0;
  margin: 20px 0;
}

.service-list li {
  font-family: "Kanit", sans-serif;
  font-size: 18px;
  line-height: 1.8;
  padding: 10px;
  background-color: #FFF;
  border-radius: 20px; /* เพิ่มขอบโค้ง */ 
  margin-bottom: 15px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* เงาเพิ่มมิติ */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.service-list li:hover {
  background-color: #f3f3f3; /* เปลี่ยนสีเมื่อ hover */
  color:#000;
  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2); /* เพิ่มเงาเมื่อ hover */
}

.service-list li i {
  color: #114a8a; /* สีของไอคอน */
  margin-right: 10px;
} 

/* สไตล์ของ txtb */
.service-list .txtb {
  color: #114a8a; /* สีทอง */
  font-weight: bold; /* ตัวหนา */
  transition: color 0.3s ease; /* การเปลี่ยนสีแบบนุ่มนวล */
}

.service-list li:hover .txtb {
  color: #535353; /* เปลี่ยนเป็นสีขาวเมื่อ hover */
}

.box {
  border-bottom: 2px solid #114a8a;
  padding-top:30px;
  padding-bottom:30px;
}

.box-right {
  border-bottom: 2px solid #114a8a;
  border-right: 2px solid #114a8a;
  padding-top:30px;
  padding-bottom:30px;
}

@media (max-width: 768px) {
  .box-right {
    border-right: none; /* ลบขอบขวาเมื่อเป็นขนาดมือถือ */
  }
}

.txtcenter{
	text-align:right;
}

h5 {
  font-weight: bold; /* ทำให้หัวข้อหนาขึ้น */
  color: #114a8a; /* สีหัวข้อ */
}

p {
  color: #000; /* สีข้อความในย่อหน้า */
}


/* Mobile-specific classes */
.mobile_on {
  display: none;
}

@media (max-width: 768px) {
	  .mobile_on {
		display: block;
	  }
	  .mobile_off {
		display: none;
	}
}

/* Add background to menu when toggled (mobile view) */
@media (max-width: 768px) {
  .navbar-collapse {
    background-color: rgba(255, 255, 255, 0.9); /* พื้นหลังสีดำโปร่งแสงเมื่อเปิดเมนู */
	padding: 10px;
  }
}


.sltxt {
  background-color: rgba(255, 255, 255, 0.8); /* พื้นหลังขาวจาง */ 
  padding: 10px; /* ระยะห่างด้านใน */ 
  width:100%;
  text-align:left;
}

.arc-highlight {
            font-size: 2.5rem;
            font-weight: bold;
            color: #333;
            text-transform: uppercase;
            letter-spacing: 2px;
            position: relative;
            display: inline-block;
            padding-bottom: 10px;
        }
        .arc-highlight::after {
            content: "";
            width: 60px;
            height: 4px;
            background-color: #ff9900;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }
        .arc-subtext {
            font-size: 1.2rem;
            color: #555;
            margin-top: 15px;
        }
        .arc-animated-text {
            font-size: 2rem;
            font-weight: bold;
            color: #104a8a;
            animation: arc-scaleText 1.5s infinite alternate;
        }
        @keyframes arc-scaleText {
            0% { transform: scale(1); }
            100% { transform: scale(1.2); }
        }
		
		
	.showimg {
		position: relative;
		overflow: hidden;    
		height: 200px;       
		display: flex;
		align-items: center;  
		justify-content: center;  
		background: #f8f8f8; 
	}

	.showimg img.img-center {
		width: 100%;
		height: auto;
		object-fit: cover;   
		object-position: center;  
	}