body{
  background-color: #000000;
  color: white;
}
.main-ls {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.topic-ban{
  font-size: 5vw;
  font-weight: 500;
  position: absolute;
  width: 100%;
  height: 45vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  color: white;
}
.banner {
  margin-top: 5vw;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height:100%;
  background-color: #000000;
}
.DIVCORAL{
  width: 40%;
  height: 60vh;
    display: flex;
  justify-content: center;
  align-items: center;
}
.carousel-item img {
    max-width: 100%;
    max-height: 100%;
    height: 40vw;
    margin: auto;
}
#video {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  height: 47vw;
  object-fit: cover;
  margin: auto;
}
.vdo_present {
  width: 100%;
  max-width: 100%;
  margin: auto;
}
.head{
  font-size: 3vw; 
  font-weight:500; 
  text-align:center;
  margin: 0;
}
.text_ban {
  margin-left: 3vw;
  font-weight: 600;
  font-size: 6vw;
  background: linear-gradient(to right, #ff96e8, #bc88ff, #67c7ff);
  -webkit-background-clip: text;
  color: transparent;
}
.img_banner {
  width: 100%;
  height: 100%;
}
.textabout {
  margin-top: 3vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 3vw;
}
.head-about{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 3vw;
  font-weight: 500;
  margin: 0;
}
.des-about {
  font-size: 1vw;
  text-indent: 2.5vw;
  text-align: justify;
  width: 80vw;
}
.Performance {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1vw;
}
.img-perfor{
  width: 50%;
  margin-top: 5vw;
  margin-bottom: 5vw;
}
.textperformance p{
  font-size: 3vw;
  font-weight:500;
  margin: 0;
}
.textperformance{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 2.5VW;
  font-weight: 500;
  margin: 0;
}
.box-spe{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 10vw;
  margin-bottom: 2vw;
}
.spec-container {
  width: 85vw;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 10px;
  box-shadow: 0 4px 20px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
}
.spec-item {
  width: 15vw;
  height: 7vw;
  text-align: center;
}
.spec-item img {
  width: 3vw;
  height: 3vw;
}
.spec-value {
  font-size: 1.5vw;
  font-weight: bold;
  margin: 0;
}
.spec-desc {
  font-size: 1vw;
  color: #ffffff;
}
.wonderfulcase {
  margin-top: 2vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.case {
  width: 100%;
}
.showperformance {
  width: 100%;
  height: 45vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #000000;
  margin: 0;
  margin-top: 10vw;
}
.showperformance img {
  width: 90%;
}
.packges {
  margin: 5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10vw;
}
.span-1 {
  font-size:1.5vw;
  font-weight:600;
  color:black;
}
.span-2 {
  font-size:1vw;
  color:#B8B8B8;
}
.packimg {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: orange;
}
.packimg img {
  width: 5vw;
  margin: 1.5vw;
}
.textpack {
  padding: 1.5vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: start;
  background-color: white;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.packges p {
  width: 10vw;
  display: flex;
}
.pack1,
.pack2,
.pack3 {
  width: 17vw;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.timeline {
  margin: 5vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.img-timeline{
  margin: 3vw;
  width: 60vw;
}
.requirements {
  margin-top: 3vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7vw;
}
.first-landingSite {
  width: 100%;
  justify-content: center;
  display: flex;
  
}
.first-landingSite img {
  width: 35vw;
  border-radius: 1vw;
}
.text-first-landingSite {
  width: 50vw;
  margin-left: 3vw;
}
.text-first-landingSite p{
  font-size: 1vw;
}
.second-landingSite {
  width: 100%;
  display: flex;
  justify-content: center;
}
.second-landingSite img {
  width: 47vw;
  border-radius: 1vw;
}
.r-second-landingSite{
  margin-left: 3vw;
}
.l-second-landingSite {
  display: flex;
  margin-left: 3vw;
  flex-direction: column;
  justify-content: space-between;
}
.l-second-landingSite p {
  font-size: 1vw;
  width: 35vw;
}
.l-second-landingSite img {
  width: 40vw;
}
.Storeroom {
  display: flex;
  justify-content: center;
  margin-left: 3vw;
}
.Storeroom img {
  width:40vw;
  border-radius: 1vw;
}
.textStoreroom {
  margin-left: 3vw;
  width: 47vw;
}
.textStoreroom h4 {
  font-size: 2vw;
}
ul {
  width: 45vw;
  font-size: 1vw;
  gap: 2vw;
}

/********************************************************************************/
.container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.slider-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide1 {
    min-width: 100%; /* ขยายขนาดของสไลด์เพื่อให้แสดงภาพเต็ม */
    box-sizing: border-box;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    opacity: 0.5; /* ทำให้ภาพขอบดูจางลง */
    transform: scale(0.8); /* ย่อขนาดของภาพขอบ */
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.slide1.active {
    width: 100%;
    opacity: 1; /* ปรับความชัดของภาพปัจจุบัน */
    transform: scale(1); /* ขยายขนาดของภาพปัจจุบัน */
}

.slide1 img {
    width: 80%;
    height: auto;
    border-radius: 3vw;
}

.navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.nav{
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    border: none;
    cursor: pointer;
    border-radius: 100%;
    margin: 0 5px; /* เพิ่ม margin เพื่อให้มีพื้นที่ระหว่างปุ่มและ dot */
    font-size: 1.5vw;
    width: 2vw;
    height: 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dots {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #bbb;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}

.dot.active {
    background-color: #FA9D24;
}

.img-before-func {
  width: 100%;
  margin: 5vw 0 10vw 0;
  display: flex;
  justify-content: center;
}
.carousel-func {
  width: 60vw;

}
.crs-img {
  width: 40vw;
  height: 50vh;
  margin: 5vw;
}
#video {
  width: 100%; /* วิดีโอจะปรับขนาดตามคอนเทนเนอร์ */
  height: 47vw; /* รักษาอัตราส่วนภาพ */
  object-fit: cover;
}
/*------------------------------------video--------------------------------------------*/
.videoproduct {
  display: flex;
  justify-content: center;
}
.videoproduct video {
  width: 100%;
  border-radius: 1vw;
}

/* Styles for mobile and tablets */
@media only screen and (max-width: 1023px) {
  .slider-wrapper .slide-button {
    display: none !important;
  }
  .slider-wrapper .image-list {
    gap: 10px;
    margin-bottom: 15px;
    scroll-snap-type: x mandatory;
  }
  .slider-wrapper .image-list .image-item {
    width: 280px;
    height: 380px;
  }
  .slider-scrollbar .scrollbar-thumb {
    width: 20%;
  }
  .topic-ban{
    font-size: 7vw;
    font-weight: 500;
    position: absolute;
    width: 100%;
    height: 175vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    color: white;
  }
  .banner {
    margin-top: 9vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height:100%;
    background-color: #000000;
  }
  #video {
    width: 100%;
    height: 88vh;
    object-fit: cover;
  }
  .vdo_present {
    width: 100%;
    max-width: 100%;
    margin: auto;
  }
  .head{
    font-size: 7vw; 
    font-weight:500; 
    text-align:center;
    margin: 0;
  }
  .text_ban {
    margin-left: 3vw;
    font-weight: 600;
    font-size: 6vw;
    background: linear-gradient(to right, #ff96e8, #bc88ff, #67c7ff);
    -webkit-background-clip: text;
    color: transparent;
  }
  .img_banner {
    width: 100%;
    height: 100%;
  }
  .DIVCORAL{
    width: 80%;
    height: 40vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .carousel-item img {
      max-width: 100%;
      max-height: 100%;
      width: 80vw;
      height: 80vw;
      margin: auto;
  }
  .textabout {
    margin-top: 10vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10vw;
  }
  .head-about{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 7vw;
    font-weight: 500;
    margin: 0;
  }
  .text-first-landingSite h4 {
    font-size: 5vw;
}
  .img-before-func {
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
}
  .des-about {
    font-size: 3.5vw;
    text-indent: 2.5vw;
    text-align: justify;
    width: 80vw;
  }
  .Performance {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1vw;
  }
  .img-perfor{
    width: 95%;
    margin-top: 5vw;
    margin-bottom: 0;
  }
  .textperformance p{
    font-size: 7vw;
    font-weight:500;
    margin: 0;
  }
  .textperformance{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 2.5VW;
    font-weight: 500;
    margin: 0;
  }
  .box-spe{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    margin-bottom: 2vw;
  }
  .spec-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    box-shadow: 0 4px 20px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-top: 5vw;
  }
  .spec-item {
    width: 17vw;
    height: 30vw;
    text-align: center;
  }
  .spec-item img {
    width: 8vw;
    height: 8vw;
    margin-bottom: 3vw;
  }
  .spec-value {
    font-size: 4vw;
    font-weight: bold;
    margin: 0;
  }
  .spec-desc {
    font-size: 2.5vw;
    color: #ffffff;
  }
  .wonderfulcase {
    margin-top: 2vw;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .case {
    width: 100%;
  }
  .showperformance {
    width: 100%;
    height: 45vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #000000;
    margin: 0;
    margin-top: 10vw;
  }
  .showperformance img {
    width: 90%;
  }
  .packges {
    margin: 5vw;
    margin-bottom: 10vw;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5vw;
  }
  .span-1 {
    font-size:3vw;
    font-weight:600;
    color:black;
  }
  .span-2 {
    font-size:2vw;
    color:#B8B8B8;
  }
  .packimg {
    border-top-left-radius: 2vw;
    border-top-right-radius: 2vw;
    background-color: orange;
  }
  .packimg img {
    width: 10vw;
    margin: 1.5vw;
  }
  .textpack {
    padding: 1.5vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: start;
    background-color: white;
    border-bottom-left-radius: 2vw;
    border-bottom-right-radius: 2vw;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  .packges p {
    width: 10vw;
    display: flex;
  }
  .pack1,
  .pack2,
  .pack3 {
    width: 25vw;
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  .timeline {
    margin: 3vw;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .img-timeline{
    width: 100vw;
  }
  .requirements {
    margin-top: 3vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7vw;
  }
  .first-landingSite {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
  }
  .first-landingSite img {
    width: 80vw;
    border-radius: 3vw;
  }
  .text-first-landingSite {
    width: 80vw;
    margin-left: 0;
    margin-top: 5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .text-first-landingSite h4{
    font-size: 5vw;
  }
  .text-first-landingSite p{
    font-size: 3.5vw;
  }
  .second-landingSite {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  .second-landingSite img {
    width: 80vw;
    border-radius: 3vw;
  }
  .r-second-landingSite{
    margin-left: 0;
    margin-top: 3vw;
  }
  .l-second-landingSite {
    display: flex;
    margin-left: 0;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
  .l-second-landingSite h4 {
    font-size: 5vw;
  }
  .l-second-landingSite p {
    font-size: 3.5vw;
    width: 80vw;
  }
  .l-second-landingSite img {
    width: 80vw;
  }
  .line-top-store {
    background-color: white;
    height: 0.1vw;
    width: 90vw;
    margin-top: 10vw;
  }
  .Storeroom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 0;
    margin-top: 10vw;
  }
  .Storeroom img {
    width:80vw;
    border-radius: 3vw;
  }
  .textStoreroom {
    margin-left: 0;
    margin-top: 5vw;
    width: 80vw;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .textStoreroom h4 {
    font-size: 6vw;
  }
  ul {
    width: 80vw;
    font-size: 3.5vw;
    gap: 0;
  }
  #video {
    width: 100%; /* วิดีโอจะปรับขนาดตามคอนเทนเนอร์ */
    height: 88vh; /* รักษาอัตราส่วนภาพ */
    object-fit: cover;
  }
  /*------------------------------------video--------------------------------------------*/
  .videoproduct {
    display: flex;
    justify-content: center;
  }
  .videoproduct video {
    width: 100vw;
    height: 100vw;
    border-radius: 1vw;
    object-fit: cover;
  }
  /********************************************************************************/
  .container {
      width: 100%;
      overflow: hidden;
      position: relative;
  }
  
  .slider-wrapper {
      width: 100%;
      overflow: hidden;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .slider {
      display: flex;
      transition: transform 0.5s ease-in-out;
  }
  
  .slide1 {
      min-width: 100%; /* ขยายขนาดของสไลด์เพื่อให้แสดงภาพเต็ม */
      box-sizing: border-box;
      padding: 20px;
      text-align: center;
      border-radius: 10px;
      opacity: 0.5; /* ทำให้ภาพขอบดูจางลง */
      transform: scale(0.8); /* ย่อขนาดของภาพขอบ */
      transition: transform 0.5s ease, opacity 0.5s ease;
  }
  
  .slide1.active {
      width: 100%;
      opacity: 1; /* ปรับความชัดของภาพปัจจุบัน */
      transform: scale(1); /* ขยายขนาดของภาพปัจจุบัน */
  }
  
  .slide1 img {
      width: 80%;
      height: auto;
      border-radius: 3vw;
  }
  
  .navigation {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 10px;
  }
  
  .nav{
      background-color: rgb(255, 255, 255);
      color: rgb(0, 0, 0);
      border: none;
      cursor: pointer;
      border-radius: 100%;
      margin: 0 5px; /* เพิ่ม margin เพื่อให้มีพื้นที่ระหว่างปุ่มและ dot */
      font-size: 1.5vw;
      width: 2vw;
      height: 2vw;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .dots {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 0;
  }
  
  .dot {
      display: inline-block;
      width: 3vw;
      height: 3vw;
      background-color: #bbb;
      border-radius: 50%;
      margin: 0 5px;
      cursor: pointer;
  }
  
  .dot.active {
      background-color: #FA9D24;
  }
  .nav {
    font-size: 3.6vw;
  }
  .prev {
    width: 5vw;
    height: 5vw;
  }
  .next {
    width: 5vw;
    height: 5vw;
  }
}