.carousel-item .carousel-caption h2 {
   font-size: 4.0em;
}
.carousel-item .carousel-caption p {
   font-size: 1.2em;     /* ลดขนาด font */
   line-height: 1.4;    /* ระยะห่างบรรทัดสบายตา */
}
.carousel-item .carousel-caption {
  position: absolute; width: 30%;
  left: 60px;        /* ระยะห่างจากด้านซ้าย */
  bottom: 50px;      /* ระยะห่างจากด้านล่าง */
  text-align: left;  /* จัดข้อความชิดซ้าย */
  right: auto;       /* ยกเลิกค่าเดิมที่เป็นชิดขวา */
}

@media (max-width: 768px) {
   .carousel-item .carousel-caption {
      text-align: left;
      bottom: 15%; /* เลื่อนข้อความขึ้นเล็กน้อย */
      padding: 0 10px; /* ขอบซ้ายขวาไม่ติดจอ */
   }
   
   .carousel-item .carousel-caption h2 {
      font-size: 3.0em;     /* ลดขนาด font */
      line-height: 1.4;    /* ระยะห่างบรรทัดสบายตา */
      text-align: center;
   }
   .carousel-item .carousel-caption p {
      font-size: 1rem;     /* ลดขนาด font */
      line-height: 1.4;    /* ระยะห่างบรรทัดสบายตา */
      text-align: center;
   }

   .carousel-control-prev,
   .carousel-control-next {
      width: 10%;   /* ให้ปุ่มแคบลง */
   }
   .carousel-control-prev-icon,
   .carousel-control-next-icon {
      transform: scale(0.7); /* ย่อ icon */
   }
}


/* explore */
#explore {
   background: #f5f6f8; padding-top: 60px; padding-bottom: 60px;
}
#explore .card-container {
   position: relative;
   width: 100%;
   height: auto;
   border-radius: 20px;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: flex-start;
}

.card-image {
   width: 100%;
   height: 100%;
   object-fit: cover;    /* ปรับภาพให้เต็มโดยไม่บิดเบี้ยว */
   display: block;
}

.card-overlay {
   position: absolute;
   inset: 0;                 /* top:0; right:0; bottom:0; left:0 */
   background: rgba(0, 0, 0, 0.4);
}

.card-content {
   position: absolute;       /* ทับบนรูป */
   left: 40px; bottom: 30px;
   color: white;
   max-width: 60%;
}

.card-content h2 {
   font-size: 3.0em;
   margin-bottom: 20px;
}

.card-content p {
   font-size: 1.2em; font-weight: 300;
   line-height: 1.5;
   margin-bottom: 25px;
}

.card-content .btn {
   display: inline-block;
   color: #ffffff;
   padding: 10px 20px;
   border-radius: 6px;
   font-weight: 500;
   text-decoration: none;
   transition: 0.3s;
}

.card-content .btn:hover {
   background: #f0f0f0;
   color: #000000;
}

@media (max-width: 768px) {
   #explore {
      padding-top: 20px; padding-bottom: 10px;
   }   
   .card-content {
      position: absolute;       /* ทับบนรูป */
      left: 20px; bottom: 20px;
      color: white;
      max-width: 80%;
   }
   .card-container {
      margin-bottom: 20px;
   }
   .card-content h2 {
      font-size: 1.4em;
      margin-bottom: 10px;
   }
   .card-content p {
      font-size: 1.0em; font-weight: 300;
      line-height: 1.5;
      margin-bottom: 25px;
      display: none;
   }
}
/* /explore */

/* steelcanopy */
#steelcanopy {
   /*position: relative;
   background: #ffffff; padding-top: 60px; padding-bottom: 60px;
   border-radius: 20px 20px 0 0; /* โค้งขอบสวย ๆ */
   position: relative;
   background: #ffffff; /* สีพื้นหลังข้อความ */
   z-index: 2;
   margin-bottom: -100px; /* ดันให้ทับเข้ามาบนรูปนิดหน่อย */
   padding-top: 60px; padding-bottom: 60px;
   border-radius: 0 0 0px 0px ; /* โค้งขอบสวย ๆ */
}
#steelcanopy .steelcanopy-text {
   padding-left: 20px;
}
#steelcanopy h2 {
   font-size: 2.2em; margin-bottom: 30px;
}
#steelcanopy p {
   font-size: 1.1em; line-height: 1.6em; color: #5d5d5d; font-weight: 300;
}

#steelcanopy .card-container {
   position: relative;
   width: 100%;
   height: auto;
   border-radius: 15px;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: flex-start;
}
#steelcanopy .card-container p {
   color: #ffffff; font-size: 1.2em; font-weight: 300;
   line-height: 1.5;
   margin-bottom: 25px;
}

@media (max-width: 768px) {
   #steelcanopy {
      padding-top: 15px; padding-bottom: 30px;
   }
   #steelcanopy .steelcanopy-text {
      padding-left: 10px; padding-right: 10px;
   }
   #steelcanopy h2 {
      font-size: 1.8em; margin-top: 10px;
   }
   #steelcanopy .card-container {
      border-radius: 10px;
   }
}
/* /steelcanopy */

/* features */
#features {
   /*background: #fff7ed;*/
   position: relative;
   background: #fff7ed; /* สีพื้นหลังข้อความ */
   z-index: 2;
   margin-top: -50px; /* ดันให้ทับเข้ามาบนรูปนิดหน่อย */
   padding-top: 80px; padding-bottom: 80px;
   border-radius: 0px 0px 0 0; /* โค้งขอบสวย ๆ */
}
#features h2 {
   font-size: 3.0em; margin-bottom: 1.2em;
}

/* จัดคอลัมภ์ไอคอน */
#features .icon-column {
   display: flex;
   /*align-items: flex-start; /* ให้ icon อยู่บนสุด */
   margin-bottom: 15px;
}
#features .icon-column i {
   margin-right: 8px; /* ระยะห่างไอคอนกับข้อความ */
   margin-top: 2px;   /* ปรับให้อยู่กลางแนวแรก */
}
#features .icon-column span {
   display: block; font-size: 1.35em; line-height: 1.35em; font-weight: 300; 
   padding-top: 4px; color: #565656;
}
#features .bi {
   font-size: 1.4em; color: #ed1c24; font-weight: 700;
}

@media (max-width: 768px) {
   #features {
      padding-top: 40px; padding-bottom: 40px;
   }
   #features h2 {
      font-size: 3.0em; margin-bottom: 20px;
   }
   #features .icon-column span {
       font-size: 1.1em; padding-top: 8px;
   }
}
/* /จัดคอลัมภ์ไอคอน */
/* /features */

/* feedback */
#feedback {
   background: #f5f6f8; padding-top: 100px; padding-bottom: 140px;
   background-image: url('../img/about-middle-bg.jpg');
   background-size: cover;        /* ให้รูปเต็มพื้นที่ */
   background-position: center;   /* จัดกึ่งกลางรูป */
   background-repeat: no-repeat; overflow: hidden;
}
#feedback h2 {
   font-size: 3.0em;
}
#feedback .text-secondary {
   font-size: 1.2em;
}

#feedback .testimonial-card {
   background: #ffffff;
   border-radius: 10px;
   min-height: 200px;
   padding: 20px;
   box-shadow: 0 2px 10px rgba(0,0,0,0.05);
   position: relative;
   height: 100%;
}
#feedback .testimonial-card .quote-icon {
   position: absolute;
   right: 20px;
   bottom: 20px;
   font-size: 3.0em; line-height: 0.2em; border: 0px solid #000000;
   color: #e60000;
}
#feedback .testimonial-card .star {
   font-size: 1.2em;
}
#feedback .testimonial-card .review {
   height: 130px;
}
#feedback .testimonial-card p {
   font-size: 1.2em; line-height: 1.4em; font-weight: 300;
}

#feedback .carousel-control-prev,
#feedback .carousel-control-next {
   width: 50px;
   height: 50px;
   background-color: #c4c4c4;
   border-radius: 50%;
   top: 50%;
   transform: translateY(-50%);
   opacity: 0.9;
}

#feedback .carousel-control-prev {
   left: -100px;   /* ขยับออกนอก slide */
}

#feedback .carousel-control-next {
   right: -100px;  /* ขยับออกนอก slide */
}

#feedback .carousel-control-prev-icon,
#feedback .carousel-control-next-icon {
   filter: invert(1);
}

@media (max-width: 768px) {
   #feedback {
      padding-top: 40px; padding-bottom: 40px;
   }
}
/* /feedback */

/* ให้ภาพเป็นพื้นหลังเต็มจอ */
.hero-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero-bg {
  background: url('../img/factory.webp') center/cover no-repeat;
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-attachment: fixed;
}
@media (max-width: 768px) {
   .hero-section {
      position: relative;
      height: 60vh;
      overflow: hidden;
   }
   .hero-bg {
      background-position: center;
      background-size: cover;         /* ให้รูปครอบพอดี */
   }
}

/* Section เนื้อหา */
.content-section {
  position: relative;
  background: #fff; /* สีพื้นหลังข้อความ */
  z-index: 2;
  margin-top: -100px; /* ดันให้ทับเข้ามาบนรูปนิดหน่อย */
  padding: 100px 20px;
  border-radius: 20px 20px 0 0; /* โค้งขอบสวย ๆ */
}

.content-inner {
  max-width: 900px;
  margin: auto;
}