li:hover .goto-page1 {
  color: rgb(226, 61, 61);
  
}
li:hover .goto-page2 {
    color: rgb(226, 113, 61);
  }
.goto-page2,.page-number-text1{
  position: relative;
    top: -80px; /* ขยับขึ้น 20px */
  }
 li:hover .goto-page3 {
    color: rgb(36, 145, 72);
  }
.goto-page3,.page-number-text1{
  position: relative;
    top: -80px; /* ขยับขึ้น 20px */
  }

  /*** Team Start ***/
.team .team-item {
  position: relative;
  padding: 0 25px 25px 25px;
  border-radius: 10px;
  transition: 0.5s;
}

.team .team-item::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  background: var(--bs-light);
  border-radius: 10px;
  transition: 0.5s;
  z-index: -1;
}

.team .team-item:hover::before {
  height: 0;
}

.team .team-item::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 0;
  bottom: 0;
  left: 0;
  border-radius: 10px;
  transition: 0.5s;
  z-index: -1;
}

.team .team-item:hover::after {
  height: 100%;
  background: #cf0a2c;
}

.team .team-item .team-img {
  width: 250px;
  height: 250px;
  margin: 20 auto;
  left: 2%;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 4px dotted #cf0a2c;
  background: white;
  padding: 2px;
}


.team-img {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}



.team .team-item  .team-img::before { 
  position: absolute;
  border-radius: 100%;
  width: 95%;
  height: 95%;
  display: flex;
  justify-content: center;
  border: 4px dotted var(--bs-white);
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  transition: transform 0.5s linear;
  border-style: dotted;
  transform-origin: center;
}
/* 
.team .team-item:hover .team-img {
  border: 4px solid var(--bs-white);
  background: 0;
} */

.team .team-item:hover .team-img {
  border-color: transparent; /* Makes border invisible on hover */
  animation: none; /* Removes animation */
}
.team-img {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rotating-border {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 102%;
  height: 102%;
  transform: translate(-50%, -50%);
  border: 4px dashed #c42525;
  border-radius: 50%;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.2s ease;
  transform-origin: center;
  box-sizing: border-box;
}

.team-item:hover .rotating-border {
  opacity: 1;
  animation: rotateCircle 10s linear infinite;
}

.team-img img {
  position: relative;
  z-index: 2;
  max-width: 100%;
  height: auto;
}

@keyframes rotateCircle {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}







.team .team-item .team-img img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  transition: 0.5s;
  
}

.text-left2 {
  text-align: left;
  transform: translateX(10px);
}

.text-left h6 {
  color: #cf0a2c;
  text-align: left;
}

.team .team-item .team-title {
  padding: 25px 0 25px 0;
  text-align: center;
}

.team .team-item .team-title h4,
.team .team-item .team-title p {
  transition: 0.5s;
}

.team .team-item:hover .team-title h4,
.team .team-item:hover .team-title p,
.team .team-item:hover .team-title h6 {
  color: var(--bs-white);
}

.team .team-item .team-icon {
  display: flex;
  justify-content: center;
}

.team .team-item .team-icon a {
  transition: 0.5s;
}

.team .team-item:hover .team-icon a {
  color: #cf0a2c;
  background: var(--bs-white);
  border: 3px solid #ffffff;
}

.team .team-item:hover .team-icon a:hover {
  color: var(--bs-white);
  background: #cf0a2c;
}

/*** Team End ***/


 /* contact */
.contact-section {
  max-width: 600px;
  margin: 50px auto;
  padding: 30px;
  background: #fdfdfd;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  font-family: 'Segoe UI', sans-serif;
  text-align: center;
}

.contact-section h2 {
  margin-bottom: 10px;
  color: #333;
}

.contact-section p {
  margin-bottom: 30px;
  color: #666;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 15px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: 16px;
}

.contact-form button {
  background-color: #007BFF;
  color: #fff;
  padding: 12px 25px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
}

.contact-form button:hover {
  background-color: #0056b3;
}
 









.office-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

.office-box {
  background-color: #fdfdfd;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 700px;
  max-width: 1000px;
  box-sizing: border-box;
}

.section-title {
  font-size: 20px;
  margin-bottom: 15px;
  color: #333;
  text-align: center;
  
}

.office-box p {
  font-size: 14px;
  margin-bottom: 8px;
}

.office-box a {
  color: #007BFF;
  text-decoration: none;
}
.office-box a:hover {
  text-decoration: underline;
}

.map-box {
  border-radius: 12px;
  overflow: hidden;
  margin-top: 10px;
  text-align: center;
}

.info-widget2 ul {
  text-align: center;
  margin-left: -10px;
}
.text-red2{
  padding: 20px;
}
/* ทีมงานของเรา */
.profile-card {
    width: 290px;
    height: 390px;
    border-radius: 15px;  
    background-color: white;       /* กล่องสีขาว */
    border: 3px solid rgb(196, 21, 21);          /* กรอบสีแดง */
    display: flex;
    flex-direction: column;
    align-items: center;
    
  }
.circle-container {
  position: relative;
  width: 100%;
  max-width: 300px;
  height: 300px;
 
  border: 1px solid #999;
}
 .circle-wrapper {
  width: 280px;
  height: 218px;
  padding: 10px;
  background-color: #cf0a2c;
  position: absolute;
  border-radius: 5%;
  transition: background-color 0.3s ease;
  margin-top: 163px;
  
}
 .toggle-img {
    display: none;
  }

  /* แสดงภาพแรกโดย default */
  
  .img-a {
  display: block;  
  margin-left: 60px; /* ขยับไปทางขวา (ดูเหมือน "ซ้าย" ตามบริบทแต่เป็นขวาในหน้าเว็บ) */
  margin-top: -260px; /* ขยับขึ้น */
  z-index: 2;
  opacity: 1;
  transform: scale(1) ;
  filter: blur(0);
  object-position: top center; /* แสดงเฉพาะครึ่งบน */
  transition: transform 0.5s ease, opacity 0.5s ease, margin-top 0.5s ease;
  position: relative;
}
.img-a {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
 .img-aa {
  display: block;  
  margin-left: 60px; /* ขยับไปทางขวา (ดูเหมือน "ซ้าย" ตามบริบทแต่เป็นขวาในหน้าเว็บ) */
  margin-top: -260px; /* ขยับขึ้น */
  z-index: 2;
  opacity: 1;
  transform: scale(1) ;
  filter: blur(0);
  object-position: top center; /* แสดงเฉพาะครึ่งบน */
  transition: transform 0.5s ease, opacity 0.5s ease, margin-top 0.5s ease;
  position: relative;
}
.img-aa { 
  width: 220px;
  height: 260px;
  border-radius: 50%;
  object-fit: cover;
  display: block;


}

.img-aaa {
  display: block;  
  margin-left: 60px; /* ขยับไปทางขวา (ดูเหมือน "ซ้าย" ตามบริบทแต่เป็นขวาในหน้าเว็บ) */
  margin-top: -260px; /* ขยับขึ้น */
  z-index: 2;
  opacity: 1;
  transform: scale(1) ;
  filter: blur(0);
  object-position: top center; /* แสดงเฉพาะครึ่งบน */
  transition: transform 0.5s ease, opacity 0.5s ease, margin-top 0.5s ease;
  position: relative;
}
.img-aaa { 
  width: 180px;
  height: 240px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
  .img-b {
    width: 150px;
    height: 300px;
    object-fit: cover;
  }

.img-b {
  display: block; /* แก้จาก none เป็น block */
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  border-radius: 0;
  margin-left: 100px;
  margin-top: -200px;
  transform: scale(1.2) ;
  filter: blur(2px);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

/* เมื่อ checkbox ถูกเช็ค (= คลิกแล้ว) */
.toggle-img:checked ~ .profile-image .img-a {
  margin-top: 80px; /* ขยับลง */
  opacity: 0;
  transform: scale(1.3);  /* ซูมออก */
  z-index: 1; /* ลดลำดับ */
}
.toggle-img:checked ~ .profile-image .img-aa {
  margin-top: 80px; /* ขยับลง */
  opacity: 0;
  transform: scale(1.3);  /* ซูมออก */
  z-index: 1; /* ลดลำดับ */
}
.toggle-img:checked ~ .profile-image .img-aaa {
  margin-top: 80px; /* ขยับลง */
  opacity: 0;
  transform: scale(1.3);  /* ซูมออก */
  z-index: 1; /* ลดลำดับ */
}
.toggle-img:checked ~ .profile-image .img-b {
  opacity: 1;
  visibility: visible;
  margin-top: -510px;
  transform: scale(1.2) ;
  filter: blur(0);
  z-index: 2;
}

/* Hover Effects */
.profile-image label:hover .img-a {
  transform: scale(1.1); /* ซูมเข้า */
  transition: transform 0.3s ease;
}
.profile-image label:hover .img-aa {
  transform: scale(1.1); /* ซูมเข้า */
  transition: transform 0.3s ease;
}
.profile-image label:hover .img-aaa {
  transform: scale(1.1); /* ซูมเข้า */
  transition: transform 0.3s ease;
}
.profile-image label:hover .img-b {
  transform: scale(1.08) ; /* ซูมเข้าเล็กน้อย */
  transition: transform 0.3s ease;
}




  .profile-text {
    position: absolute;  /* ข้อความลอย ไม่ดัน layout */
          /* จัดข้อความทั้งหมดให้อยู่กลาง */
  margin-top: 10px;
  z-index: 99; /* ให้ข้อความอยู่ด้านบนสุด */
}

.profile-name h4 {
  font-size: 45px;
  font-weight: bold;
  color: #312e2e;
  margin: 0;
  position: relative;          /* เพิ่มเพื่อให้ขยับเฉพาะข้อความนี้ */
  left: -50px;                 /* ขยับไปทางซ้าย 10px */
  top: 30px;                  /* ขยับขึ้น 20px */
}


.profile-name1 h4 {
  font-size: 18px;
  margin: 0px 0 0 0;
  color: #000000;
  margin-left: -50px; /* ขยับข้อความไปทางซ้าย */
  margin-top: 30px; /* ขยับข้อความขึ้น */
   
}
.profile-container {
  display: flex;
  justify-content: center;     /* จัดให้อยู่กลาง */
  gap: 20px;                   /* ระยะห่างระหว่างกล่อง */
  flex-wrap: wrap;             /* ถ้าจอแคบ จะขึ้นบรรทัดใหม่ */
  margin-top: 30px;
}
.icons {
  display: flex;
  justify-content: center; /* จัดให้อยู่กึ่งกลางแนวนอน */
  gap: 30px;               /* ระยะห่างระหว่างไอคอน */
  list-style: none;        /* ลบจุดหน้ารายการ */
  padding: 0px; /* ระยะห่างรอบๆ */
  margin: 110px ;
  margin-left: -10px; /* ขยับไปทางซ้าย */
  z-index: 99; /* ให้ไอคอนอยู่ด้านบนสุด */
}

.icons li a {
  color: #888888;          /* สีเทา */
  font-size: 20px;         /* ขนาดไอคอน */
  transition: color 0.3s;
}

.icons li a:hover {
  color: #e60023;          /* เปลี่ยนเป็นสีแดงเมื่อ hover */
}

.quote-box {
  margin-left: -45px; /* ขยับไปทางซ้าย */
 margin-top: -80px;
  color: #ffffff;
  z-index: 99; /* ให้ข้อความอยู่ด้านบนสุด */
  font-size: 18px; /* ขนาดข้อความ */
}

.position {
  text-align: left;         /* จัดข้อความชิดซ้าย */
  
  font-size: 14px;
  line-height: 1.6;
  margin-top: 10px;
  z-index: 99; /* ให้ข้อความอยู่ด้านบนสุด */
  color: #000000; /* สีข้อความ */
}
.white-image {
    filter: brightness(1000%) grayscale(100%) contrast(0%);
    
}
.quote-box1 {
      position: absolute;
      bottom: -80px;
      left: 0;
      width: 10%;
      background-color: #e00;
      color: white;
      padding: 15px;
      border-radius: 10px;
      font-size: 14px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

    .quote-box1::before {
      content: "";
      position: absolute;
      top: -10px;
      left: 30px;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      
      border-bottom: 10px solid #e00;
    }
     ul.info-list {
      
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 16px;
    text-align: left;
    margin-left: -30px; /* ขยับไปทางซ้าย */
  }

 .info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-list li {
    margin: 10px 0;
}

.info-list li a {
    display: inline-block;
    width: 100%;
    padding: 12px 20px;
    border-radius: 10px;
    background: linear-gradient(135deg, hsl(0, 15%, 80%), #ffffff);
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.info-list li a::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    transform: skewX(-25deg);
    transition: left 0.5s ease;
}

.info-list li a:hover::before {
    left: 125%;
}

.info-list li a:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}
 .hover-switch {
    position: relative;
    width: 150px; /* ปรับตามขนาดรูป */
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
}

.hover-switch img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease-in-out;
    top: 0;
    left: 0;
}

.hover-switch .img-b {
    opacity: 0;
}

.hover-switch:hover .img-b {
    opacity: 1;
}

.hover-switch:hover .img-a {
    opacity: 0;
}
.addto-cart {
    color: red;
}