/* index.html */

html {
    filter: grayscale(100%);
}

#index-html #about {
      padding-top: 50px;
    }

    #index-html #customer-ref {
      padding-top: 84px;
    }

    #index-html #services {
      padding-top: 83px;
      margin-top: 106px;
    }
    
    #index-html #upbutnup {
      /* padding-top: 20px;  */
      margin-top: -110px;
    }
   

    #index-html .next-button {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 3px;
      padding: 10px 20px;
      background-color: #be5505;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      max-width: 200px;
      transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
    }
    #index-html .fade-in {
      opacity: 0; /* ซ่อนปุ่มก่อน */
      animation: fadeInAnimation 1s forwards; /* เริ่มอนิเมชัน 1 วินาที */
      animation-delay: 0.4s; /* ตั้งเวลา delay ให้เหมาะสม */
    }
    
    /* สร้าง keyframes สำหรับการ fade-in */
    @keyframes fadeInAnimation {
      0% {
        opacity: 0; /* เริ่มต้นที่โปร่งใส */
      }
      100% {
        opacity: 1; /* จบที่ไม่โปร่งใส */
      }
    }    

    #index-html .next-button img {
      margin-left: 10px;
      width: 16px;
      height: auto;
      animation: bounce 1s infinite;
      transition: filter 0.3s ease;
      /* เพิ่มเอฟเฟ็กต์การเปลี่ยนสีรูปภาพ */
    }

    #index-html .next-button:hover {
      background-color: #fff;
      /* เปลี่ยนสีพื้นหลังเป็นสีขาว */
      color: #f37a1f;
      /* เปลี่ยนสีตัวอักษรเป็นสีส้ม */
      transform: translateX(-50%) scale(1.05);
      /* เพิ่มการขยายปุ่มเล็กน้อย */
    }

    #index-html .next-button:hover img {
      filter: invert(55%) sepia(78%) saturate(514%) hue-rotate(-9deg) brightness(96%) contrast(89%);
      transform: translateX(-50%) scale(1.05);
      /* เปลี่ยนสีของรูปภาพให้เป็นสีส้ม */
    }

    @keyframes bounce {

      0%,
      20%,
      50%,
      80%,
      100% {
        transform: translateY(0);
      }

      40% {
        transform: translateY(-5px);
      }

      60% {
        transform: translateY(-3px);
      }
    }

    /* Responsive Design */
    

    #index-html .responsive-image {
      width: 100%;
      max-width: 600px;
      /* ปรับขนาดสูงสุดของรูปภาพ */
      height: auto;
      /* ทำให้รูปปรับขนาดอัตโนมัติตามความกว้าง */
      margin: 0 auto;
      /* จัดกึ่งกลาง */
      display: block;
    }

    #index-html #s1 {
      scroll-margin-top: 250px;
    }
  
    #index-html #s2 {
      scroll-margin-top: 250px;
    }
  
    #index-html #s3 {
      scroll-margin-top: 120px;
    }
  
    #index-html #s4 {
      scroll-margin-top: 250px;
    }
  
    #index-html #s5 {
      scroll-margin-top: 100px;
    }
  
    #index-html #s6 {
      scroll-margin-top: 100px;
    }
  
    #index-html #s7 {
      scroll-margin-top: 100px;
    }
  
    #index-html #s8 {
      scroll-margin-top: 100px;
    }
  
    #index-html .our-clients {
      padding: 30px 0;
    }
  
    #index-html .swiper-container {
      width: 100%;
      height: 150px;
    }
  
    #index-html .clients-logo-wrapper {
      display: flex;
      align-items: center;
    }
  
    #index-html .swiper-slide {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }
  
    #index-html .client-logo img {
      max-width: 100%;
      height: auto;
      object-fit: contain;
    }
    #index-html #video-getintouch {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }
  
    /* Center video content */
    #index-html .content-getintouch {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      position: relative;
    }
  
    /* กำหนดให้ flex ในคอลัมน์ทำงานได้ถูกต้อง */
    #index-html .about-col {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  
    #index-html .text-area,
    #index-html .img-area {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      flex-grow: 1;
    }
    #index-html .left-col, 
    #index-html.right-col {
    flex: 1; /* แบ่งพื้นที่เท่ากัน */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #index-html .about-img2 {
    width: 552px; /* กำหนดให้ภาพเต็มพื้นที่ของคอลัมน์ */
    max-width: 600px; /* กำหนดขนาดภาพสูงสุด (ปรับได้ตามต้องการ) */
    height: auto; /* รักษาอัตราส่วนภาพ */
    border-radius: 10px; /* ปรับมุมให้โค้ง */
    margin-top: -55px;
    padding-top: 52px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* เพิ่มเงา */
  }

  
    /* เพื่อให้แน่ใจว่าภาพอยู่ด้านล่างของแต่ละคอลัมน์ */
    #index-html .text-area {
      order: 1;
      text-align: left;
    }
  
    #index-html .about-text {
      text-align: left;
      margin-left: 45px;
    }
  
    #index-html .image-box {
      padding-top: 40px;
    }
  
    #index-html .cert-box {
      order: 2;
    }
    /* Wrapper for responsive aspect ratio */
    #index-html .video-wrapper {
      position: relative;
      width: 100%;
      padding-bottom: 56.25%;
      /* Aspect ratio 16:9 */
      height: 0;
    }
  
    /* Responsive video iframe */
    #index-html #video-frame {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  
    /* ปิดเอฟเฟกต์ tilt สำหรับรูปที่มีคลาส no-tilt */
    #index-html .no-tilt {
      transform: none !important;
      transition: none !important;
      animation: none !important;
    }
  
  
    /* Style for the close button */
    #index-html .close-video-btn {
      position: absolute;
      top: 15px;
      right: 15px;
      background-color: transparent;
      color: #ffffff;
      border: none;
      font-size: 24px;
      cursor: pointer;
      z-index: 1001;
  
    }

    #index-html .play-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 92px;
      height: 98px;
      transform: translate(-50%, -50%);
      background-color: rgba(0, 0, 0, 0.5);
      padding: 25px;
      border-radius: 50%;
    }
  
    #index-html .play-icon:hover {
      transform: translate(-50%, -50%) scale(1.1);
      background-color: rgba(0, 0, 0, 0.7);
    }
  
    /* Background overlay */
    #index-html #video-getintouch {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.8);
      z-index: 1000;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
      box-sizing: border-box;
    }
  
    #index-html .close-video-btn {
      position: fixed;
      top: 13%;
      right: 1%;
      /* ใช้ left แทน right เพื่อให้ย้ายไปทางซ้าย */
      background-color: transparent;
      color: hsl(0, 0%, 100%);
  
      cursor: pointer;
      font-size: 35px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 100000;
      transform: translateY(-50%);
      pointer-events: auto;
    }
  
    /* ขนาดไอคอน */
    #index-html .close-video-btn i {
      font-size: 18px;
      /* ปรับขนาดของไอคอน */
    }
  
  
    /* Container ของวิดีโอ */
    #index-html .content-getintouch {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }
  
    /* ขนาด iframe วิดีโอ */
    #index-html #youtube-video {
      width: 90%;
      max-width: 1080px;
      aspect-ratio: 16 / 9;
      position: relative;
      z-index: 1;
    }
  
    #index-html .video-thumbnail {
      position: relative;
      cursor: pointer;
    }
  
    #index-html .video-thumbnail img {
      width: 100%;
      height: auto;
    }
  
    @keyframes lineGrow {
      from {
        width: 0;
      }
  
      to {
        width: 100%;
      }
    }
  
  
  
    #index-html section.mega-section {
      position: relative;
      padding-top: 30px;
      margin-top: 40px;
    }
  
    #index-html section.mega-section.our-clients {
      position: relative;
      padding-top: 30px;
      padding-bottom: 60px;
      margin-top: 0px;
    }
  
  
    #index-html section.mega-section::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      /* เริ่มที่ความกว้าง 0% */
      height: 1px;
      /* ความหนาของเส้น */
      background-color: #f37a1f;
      transition: width 1s ease-out;
      /* การเปลี่ยนแปลงของความกว้าง */
    }
  
    /* เมื่อ Section มีคลาส 'animate' จะทำให้เส้นขยายออก */
    #index-html section.mega-section.animate::before {
      width: 100%;
      animation: lineGrow 1s ease-out forwards;
    }
  
    /* ซ่อนแค่เส้นอนิเมชั่น (span .animated-line) */
    #index-html .page-hero .animated-line {
      display: none !important;
      /* ซ่อนเส้นทั้งหมด */
    }
  
    /* ซ่อนเส้นออกจากการแสดงผล แต่ยังคงอนิเมชั่น */
    #index-html .page-hero .animated-line {
      visibility: hidden !important;
      /* ซ่อนเส้น แต่ยังคงพื้นที่ที่เส้นใช้ */
      opacity: 0 !important;
      /* ทำให้เส้นหายไปจากมุมมอง */
    }
  
    /* // iPad devices (portrait and landscape) */
   
  /*------------------------------index.html------------------------------------------------*/
/*solution-details.html*/
  
  #detail-html #s1 {
    scroll-margin-top: 250px; /* ปรับระยะห่างจากด้านบนตามความเหมาะสม */
  }

  #detail-html #s2 {
    scroll-margin-top: 250px; /* ปรับระยะห่างจากด้านบนตามความเหมาะสม */
  }

  #detail-html #s3 {
    scroll-margin-top: 120px;
  }

  #detail-html #s4 {
    scroll-margin-top: 250px;
  }

  #detail-html #s5 {
    scroll-margin-top: 100px;
  }

  #detail-html #s6 {
    scroll-margin-top: 100px;
  }

  #detail-html #s7 {
    scroll-margin-top: 100px;
  }

  #detail-html #s8 {
    scroll-margin-top: 100px;
  }

  #detail-html div.mega-div {
    position: relative;
    padding-top: 30px;
    margin-top: 40px;
  }

  #detail-html div.mega-div.our-clients {
    position: relative;
    padding-top: 30px;
    padding-bottom: 60px;
    margin-top: 0px;
  }

  #detail-html div.mega-div::before {
    content: "";
    position: absolute;
    top: -39px;
    left: 0;
    width: 0; /* เริ่มที่ความกว้าง 0% */
    height: 1px; /* ความหนาของเส้น */
    background-color: #f37a1f;
    transition: width 1s ease-out; /* การเปลี่ยนแปลงของความกว้าง */
  }

  /* เมื่อ div มีคลาส 'animate' จะทำให้เส้นขยายออก */
  #detail-html div.mega-div.animate::before {
    width: 100%;
    animation: lineGrow 1s ease-out forwards;
  }
  /* กำหนดความสูงสูงสุดและทำให้สามารถเลื่อนเมนูได้ */
  #detail-html ul.solution-list-scrollspy {
    max-height: 300px; /* ตั้งความสูงสูงสุดที่ต้องการให้เมนูย่อยเลื่อนได้ */
    overflow-y: auto; /* เพิ่มการเลื่อนแนวตั้ง */
    transition: max-height 0.3s ease-out; /* เพิ่มแอนิเมชั่น */
  }

  /* เมนูที่เปิดใช้งาน */
  #detail-html ul.solution-list-scrollspy.active {
    max-height: 300px; /* กำหนดความสูงสูงสุดเมื่อเมนูเปิด */
    overflow-y: auto; /* เปิดการเลื่อน */
  }

  /* เมนูที่พับ */
  #detail-html ul.solution-list-scrollspy.collapsed {
    max-height: 0; /* เมื่อเมนูถูกพับ */
    overflow: hidden; /* ซ่อนเนื้อหาที่เกิน */
  }

  /* ปรับให้ตัวเลือกเมนูที่สามารถคลิกได้ */
  #detail-html .sidebar-title-edit {
    cursor: pointer;
    font-weight: bold;
    margin-top: 20px;
  }

  /* ตั้งค่าระยะห่างระหว่างรายการในเมนู */
  #detail-html .list-item {
    margin-bottom: 10px;
  }

  #detail-html .list-item a {
    text-decoration: none;
    color: #007bff;
    display: flex;
    align-items: center;
  }

  #detail-html .list-item a i.icon {
    margin-left: 8px;
  }

  /* สไตล์ปกติของ list-item */
  #detail-html .service-single .service-sidebar .sidebar-pane .list-item {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    background: rgba(0, 0, 51, 1);
    color: white;
    opacity: 0.65;
    border-radius: 0.25rem;
    transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
  }

  #detail-html .service-single .service-sidebar .sidebar-pane .list-item a {
    text-decoration: none;
    color: inherit;
    width: 100%;
  }

  /* สไตล์เมื่อเอาเมาส์ไปวาง */
  #detail-html .service-single .service-sidebar .sidebar-pane .list-item:hover {
    background-color: #2a2a7d; /* สีที่ต้องการเมื่อ hover */
    opacity: 1;
  }

  /* สไตล์เมื่อปุ่มอยู่ในสถานะ active */
  #detail-html .service-single .service-sidebar .sidebar-pane .list-item.active {
    background-color: #2a2a7d; /* สีเดียวกับตอน hover */
    opacity: 1;
    border-radius: 0.25rem;
  }
  /*------------------------------solution-details.html------------------------------------------------*/
  /*solution.html*/
  
  #solutions-html .hero-title {
    margin-top: 1rem; /* เพิ่มระยะห่างด้านบน */
  }


  #solutions-html .mega-section {
    padding: 15px 0;
  }
  #solutions-html div.mega-div {
    position: relative;
    padding-top: 0px;
    margin-top: 40px;
  }

  #solutions-html div.mega-div.our-clients {
    position: relative;
    padding-top: 30px;
    padding-bottom: 60px;
    margin-top: 0px;
  }

  #solutions-html div.mega-div::before {
    content: "";
    position: absolute;
    top: -39px;
    left: 0;
    width: 0; /* เริ่มที่ความกว้าง 0% */
    height: 1px; /* ความหนาของเส้น */
    background-color: #f37a1f;
    transition: width 1s ease-out; /* การเปลี่ยนแปลงของความกว้าง */
  }

  /* เมื่อ div มีคลาส 'animate' จะทำให้เส้นขยายออก */
  #solutions-html div.mega-div.animate::before {
    width: 100%;
    animation: lineGrow 1s ease-out forwards;
  }
  /*------------------------------solution.html------------------------------------------------*/
  /*about.html*/
  
#about-html #bout {

  padding-top: 10px;
  margin-top: -140px;
}

#about-html #activities {
  padding-top: 85px;
  margin-top: -128px;
}
#about-html #bout2 {
  margin-bottom: -47px;
/* padding-top: 20px; */
margin-top: 87px;
}


#about-html #bout3 {
  padding-top: 70px;
  margin-top: -18px;
}

/* ซ่อนป๊อปอัพเริ่มต้น */
#about-html .popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  /* สีพื้นหลังทึบ */
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

#about-html .popup-content {
  position: relative;
  width: 80%;
  max-width: 800px;
}

#about-html .popup-content iframe {
  width: 100%;
  height: 450px;
}

#about-html .close-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 30px;
  color: white;
  cursor: pointer;
}

/* Style สำหรับ modal */
#about-html .modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
  cursor: zoom-out;
}

/* Modal Image */
#about-html .modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  cursor: default;
}

/* Close Button */
#about-html .close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

#about-html .close:hover,
#about-html .close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* Caption */
#about-html #caption {
  text-align: center;
  color: #fff;
  font-size: 20px;
  padding: 10px;
}

#about-html .next-button {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 26px;
margin-bottom: 0px;
  bottom: 30px;
  padding: 10px 20px;
  background-color: #be5505;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 200px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
#about-html .fade-in {
  opacity: 0; /* ซ่อนปุ่มก่อน */
  animation: fadeInAnimation 1s forwards; /* เริ่มอนิเมชัน 1 วินาที */
  animation-delay: 0.4s; /* ตั้งเวลา delay ให้เหมาะสม */
}

/* สร้าง keyframes สำหรับการ fade-in */
@keyframes fadeInAnimation {
  0% {
    opacity: 0; /* เริ่มต้นที่โปร่งใส */
  }
  100% {
    opacity: 1; /* จบที่ไม่โปร่งใส */
  }
}

#about-html .next-button img {
  margin-left: 10px;
  width: 16px;
  height: auto;
  animation: bounce 1s infinite;
  transition: filter 0.3s ease;
  /* เพิ่มเอฟเฟ็กต์การเปลี่ยนสีรูปภาพ */
}

#about-html .next-button:hover {
  background-color: #fff;
  /* เปลี่ยนสีพื้นหลังเป็นสีขาว */
  color: #f37a1f;
  /* เปลี่ยนสีตัวอักษรเป็นสีส้ม */
  transform: translateX(-50%) scale(1.05);
  /* เพิ่มการขยายปุ่มเล็กน้อย */
}

#about-html .next-button:hover img {
  filter: invert(55%) sepia(78%) saturate(514%) hue-rotate(-9deg) brightness(96%) contrast(89%);
  transform: translateX(-50%) scale(1.05);
  /* เปลี่ยนสีของรูปภาพให้เป็นสีส้ม */
}

@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-5px);
  }

  60% {
    transform: translateY(-3px);
  }
}

/* Responsive Design */

#about-html .page-hero {
  height: 20vh !important;
  /* ลดความสูงและบังคับให้ใช้ค่าความสูงนี้ */
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
}



#about-html .swiper-slide img {
  cursor: zoom-in;
  width: 100%;
  height: 100%;
  /* ขยายภาพเต็มพื้นที่ของ slide */
  object-fit: cover;
  /* ปรับให้ภาพเต็มพื้นที่โดยยังรักษาสัดส่วน */
}

#about-html section.mega-section {
  position: relative;
  padding-top: 30px;
  margin-top: 40px;
}

#about-html section.mega-section.our-clients {
  position: relative;
  padding-top: 30px;
  padding-bottom: 60px;
  margin-top: 0px;
}


#about-html section.mega-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  /* เริ่มที่ความกว้าง 0% */
  height: 0.5px;
  /* ความหนาของเส้น */
  background-color: #f37a1f;
  transition: width 1s ease-out;
  /* การเปลี่ยนแปลงของความกว้าง */
}

/* เมื่อ Section มีคลาส 'animate' จะทำให้เส้นขยายออก */
#about-html section.mega-section.animate::before {
  width: 100%;
  animation: lineGrow 1s ease-out forwards;
  top: -40px;
}

/* ซ่อนแค่เส้นอนิเมชั่น (span .animated-line) */
#about-html .page-hero .animated-line {
  display: none !important;
  /* ซ่อนเส้นทั้งหมด */
}

/* ซ่อนเส้นออกจากการแสดงผล แต่ยังคงอนิเมชั่น */
#about-html .page-hero .animated-line {
  visibility: hidden !important;
  /* ซ่อนเส้น แต่ยังคงพื้นที่ที่เส้นใช้ */
  opacity: 0 !important;
  /* ทำให้เส้นหายไปจากมุมมอง */
}


/* Border animation style for separating sections */
#about-html section.mega-section {
  position: relative;
  padding-bottom: 0;
  margin-bottom: 30px;
}

/* Invisible border element to animate */
#about-html section.mega-section::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  /* start with 0 width for animation */
  height: 2px;
  background-color: #f37a1f;
  transition: width 1s ease-out;
  /* ease animation for smooth effect */
}

/* Class to trigger the border animation */
#about-html section.mega-section.animate::before {
  width: 100%;
  /* animate to full width */
}

/* Keyframes for scroll-based animation */
@keyframes lineGrow {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}
  /*------------------------------about.html------------------------------------------------*/
  /*contact.html*/
  
#customer-html #pricing-2 {
  padding-top: 50px;
  margin-top: -11px;
}
#customer-html #pricing-3 {
  padding-top: 50px;
  margin-top: -11px;
}
#customer-html #our-clients{
  /* padding-top: 83px; */
      margin-top: 40px;
}
          

#customer-html .next-button {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 26px;
  margin-bottom: -24px;
  bottom: 30px;
  padding: 10px 20px;
  background-color: #be5505;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 200px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
#customer-html .fade-in {
  opacity: 0; /* ซ่อนปุ่มก่อน */
  animation: fadeInAnimation 1s forwards; /* เริ่มอนิเมชัน 1 วินาที */
  animation-delay: 0.4s; /* ตั้งเวลา delay ให้เหมาะสม */
}

/* สร้าง keyframes สำหรับการ fade-in */
@keyframes fadeInAnimation {
  0% {
    opacity: 0; /* เริ่มต้นที่โปร่งใส */
  }
  100% {
    opacity: 1; /* จบที่ไม่โปร่งใส */
  }
}


#customer-html .next-button img {
  margin-left: 10px;
  width: 16px;
  height: auto;
  animation: bounce 1s infinite;
  transition: filter 0.3s ease; /* เพิ่มเอฟเฟ็กต์การเปลี่ยนสีรูปภาพ */
}

#customer-html .next-button:hover {
  background-color: #fff; /* เปลี่ยนสีพื้นหลังเป็นสีขาว */
  color: #f37a1f; /* เปลี่ยนสีตัวอักษรเป็นสีส้ม */
  transform: translateX(-50%) scale(1.05); /* เพิ่มการขยายปุ่มเล็กน้อย */
}

#customer-html .next-button:hover img {
  filter: invert(55%) sepia(78%) saturate(514%) hue-rotate(-9deg) brightness(96%) contrast(89%);
  transform: translateX(-50%) scale(1.05); 
  /* เปลี่ยนสีของรูปภาพให้เป็นสีส้ม */
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-5px);
  }
  60% {
    transform: translateY(-3px);
  }
}

   

#customer-html .pricing {
    overflow: hidden;
    position: relative;
    padding: 6rem 0;
}

#customer-html .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1* var(--bs-gutter-y));
    margin-right: calc(-.5* var(--bs-gutter-x));
    margin-left: calc(-.5* var(--bs-gutter-x));
}
#customer-html .mega-section {
    padding: 17px 0;
} 

#customer-html  div.mega-div {
    position: relative;
    padding-top: 0px;
    margin-top: 40px;
}

#customer-html div.mega-div.our-clients {
    position: relative;
    padding-top: 30px;
    padding-bottom: 60px;
    margin-top: 0px;
}


#customer-html div.mega-div::before {
    content: "";
    position: absolute;
    top: -39px;
    left: 0;
    width: 0; /* เริ่มที่ความกว้าง 0% */
    height: 1px; /* ความหนาของเส้น */
    background-color: #f37a1f;
    transition: width 1s ease-out; /* การเปลี่ยนแปลงของความกว้าง */
}

/* เมื่อ div มีคลาส 'animate' จะทำให้เส้นขยายออก */
#customer-html div.mega-div.animate::before {
    width: 100%;
    animation: lineGrow 1s ease-out forwards;
} 
  /*------------------------------contact.html------------------------------------------------*/
  /*contact-us.html*/
  
 
  #contact-html .location-address {
    font-size: 0.85rem;
    /* ลดขนาดที่อยู่ให้เล็กลง */
  }
 
  #contact-html .location-card {
    text-align: center;
  }
 
  #contact-html .map-box {
    height: 200px;
    /* ลดขนาดแผนที่ */
  }
 
  #contact-html .location-card .content-title {
    font-size: 0.9rem;
    /* ลดขนาดหัวข้อของการ์ด */
  }
 
  #contact-html .location-card a {
    font-size: 0.8rem;
    /* ลดขนาดลิงค์ */
  }
 
  #contact-html .sec-heading .content-area h2 {
    font-size: 1rem;
    /* ลดขนาดหัวข้อ */
  }
 
  #contact-html .col-4,
  #contact-html .col-8 {
    width: 100%;
  }
 
  #contact-html .info-panel {
    padding: 10px;
  }
 
  /* เพิ่มระยะห่างระหว่างการ์ด */
  #contact-html .info-panel {
    margin-bottom: 15px;
  }
 
  #contact-html .swiper-container {
    margin-top: 15px !important;
  }
 
 
 
  #contact-html #beforefoot{
    padding: 30px;
  }
   
  #contact-html .mega-section {
    padding: 15px 0;
}
#contact-html  div.mega-div {
    position: relative;
    padding-top: 0px;
    margin-top: 40px;
}

#contact-html div.mega-div.our-clients {
    position: relative;
    padding-top: 30px;
    padding-bottom: 60px;
    margin-top: 0px;
}


#contact-html div.mega-div::before {
    content: "";
    position: absolute;
    top: -39px;
    left: 0;
    width: 0; /* เริ่มที่ความกว้าง 0% */
    height: 1px; /* ความหนาของเส้น */
    background-color: #f37a1f;
    transition: width 1s ease-out; /* การเปลี่ยนแปลงของความกว้าง */
}

/* เมื่อ div มีคลาส 'animate' จะทำให้เส้นขยายออก */
#contact-html div.mega-div.animate::before {
    width: 100%;
    animation: lineGrow 1s ease-out forwards;
}
  /*------------------------------contact-us.html------------------------------------------------*/
 /* Privacy Policy.html */

 /* เพิ่ม padding ให้กับ section ทั้งหมด */
   
 #privacy-html #contact-us {
  padding: 30px 20px; /* เพิ่มระยะห่างจากขอบซ้ายและขวา */
}

/* เพิ่มการจัดระยะห่างให้กับ content-area */
#privacy-html #contact-us .content-area {
  max-width: 1200px; /* กำหนดขนาดสูงสุด */
  margin: 0 auto; /* จัดให้อยู่กลาง */
  padding-left: 15px;
  padding-right: 15px; /* เพิ่มระยะห่างจากขอบ */
}

/* ปรับข้อความใน h2 */
#privacy-html #contact-us h2.title {
  font-size: 50px; /* ปรับขนาดฟอนต์ */
  margin-top: 20px; /* เพิ่มระยะห่างจากด้านบน */
  margin-bottom: 20px; /* เพิ่มระยะห่างจากด้านล่าง */
  font-weight: bold; /* ทำให้ข้อความหนาขึ้น */
}

/* ปรับข้อความใน h3 */
#privacy-html #contact-us h3.title {
  font-size: 40px; /* ปรับขนาดฟอนต์ */
  margin-top: 20px;
  margin-bottom: 20px;
  padding-left: 10px; /* เพิ่ม padding ซ้าย */
  padding-right: 10px; /* เพิ่ม padding ขวา */
  font-weight: bold;
}

/* ปรับข้อความใน p.subtitle */
#privacy-html #contact-us p.subtitle {
  font-size: 16px; /* กำหนดขนาดฟอนต์ */
  margin-top: 10px; /* เพิ่มระยะห่างด้านบน */
  margin-bottom: 20px; /* เพิ่มระยะห่างด้านล่าง */
  line-height: 1.6; /* เพิ่มระยะห่างระหว่างบรรทัด */
  padding-left: 10px;
  padding-right: 10px;
}

/* ลบจุดจาก <ul> ที่มีคลาส .no-bullets */
#privacy-html .no-bullets {
  list-style-type: none;  /* ลบจุด (bullets) */
  padding-left: 0;        /* ลบการเยื้องซ้าย */
  margin-left: 0;         /* ลบการเยื้องซ้าย */
}

/* เพิ่มระยะห่างระหว่างรายการ */
#privacy-html .no-bullets li {
  margin-bottom: 10px; /* เพิ่มระยะห่างระหว่างแต่ละรายการ */
}

/* ลดขนาดฟอนต์ของข้อความใน <h3> */
#privacy-html #contact-us h4.title .hollow-text {
  font-size: 14px;  /* ปรับขนาดฟอนต์ให้เล็ก */
  font-weight: normal; /* กำหนดให้ฟอนต์ไม่หนา */
}

   /* ------------------------------ */