:root{
  --fw-green: #3AA25C;   /* เขียวหลัก */
  --fw-green-dark:#2F7F49;
  --fw-lime:  #B6E07A;   /* เขียวมะนาวนุ่ม */
  --fw-yellow:#F6EB61;   /* เหลืองนวล */
  --fw-ink:   #222631;   /* ตัวหนังสือหลัก */
  --fw-muted: #6c757d;   /* ตัวหนังสือรอง */
  --fw-line:  rgba(58,162,92,.15);
  --fw-white: #ffffff;
  --fw-bg:    #F8FAF6;   /* พื้นหลังอ่อน */
  --fw-radius: 20px;
  --fw-shadow: 0 10px 25px rgba(34,38,49,.08);
  --fw-shadow-lg: 0 18px 44px rgba(34,38,49,.14);
}
.w-20{
  width: 20%;
}
.square-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px; /* ถ้าอยากได้โค้ง */
}
.service-scroll{
  overflow-y: scroll;
    height: 175px;
}
.break-all {
  word-break: break-word;
}
.card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ให้ card-body ขยายเต็มพื้นที่ */
.card-body-1 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
      flex: 1 1 auto;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
    color: var(--bs-card-color);
}
.card-body-2 {
  display: flex;
  flex-direction: column;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
    color: var(--bs-card-color);
}

/* ดันปุ่มไปล่าง */
.card-body-1 .sec5-btn {
    margin-top: auto;
    width: max-content;
    padding: 5px 35px;
}
@font-face {
  font-family: 'DB Heavent';
  src: url('../fonts/DBHeavent.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
body {
      font-family: 'DB Heavent', sans-serif;
    font-weight: 500;
    font-size: 22px;
    letter-spacing: 1px;
    line-height: 1.5;
}
.dropdown-menu {
  background-color: #21252900; /* หรือใช้สีเดียวกับ .text-bg-dark */
  border: none;
  border-radius: 0.5rem;
}

/* ปรับตัวอักษร dropdown ให้สีขาว */
.dropdown-menu .dropdown-item {
  color: #fff;
}

/* ปรับตอน hover ให้มีพื้นหลังโปร่งใส */
.dropdown-menu .dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.text-justify {
  text-align: justify;
}
.nav-style{
          background-color: #d5e03c !important;
    padding-bottom: 0;
    height: 90px;
}
.nav-bg-sub{
      background: #fff;
    top: 62px !important;
}
.color-nav-sub{
    color: #665c53;
}
.dropdown-menu .dropdown-item {
    color: #665c53;
}
.footer-bg{
  background-color: #5E5043; 
  color: white; 
  padding: 40px 0;
}
.fw-600{
  font-weight: 600;
}
.place-items-end{
        place-items:end;
    }
    .place-items-start{
       place-items:start; 
    }
    .place-items-center{
       place-items:center; 
    }
    .color-text{
      color: #665c53 !important;
    }
    .nav-link {
      color: #fff;
      font-weight: bold;
    }

    .nav-link:active {
      color: #A9D326 !important;
      font-weight: bold;
    }

    .logo-img {
            height: 130px;
    position: relative;
    top: 15px;
    }

    .carousel-item {
      height: 550px;
      background-size: cover;
      background-position: center;
      position: relative;
    }

    .carousel-caption {
      bottom: 30%;
  position: absolute;
  z-index: 2;
    }

    .carousel-caption h1 {
      font-size: 8rem;
      font-weight: bold;
    }

    .carousel-caption h4 {
      font-weight: 300;
      font-size: 30px;
    }

    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4); /* มืดครึ่งหนึ่ง */
      z-index: 1;
    }

    .nav-show {
      z-index: 3;
    }
    /* .carousel-caption {
      z-index: 2;
    } */

    .carousel-indicators-box{
    width: 10px !important;
    height: 10px !important;
    }
    .sec1-bg{
      background: url(../img/bg1-1.png) no-repeat center top;
        }
        .sec1-vec-none{
          display: block;
        }
    .sec1-col12{
    width: 100%;
    }
    .fs-22{
      font-size: 22px;
    }
    .linear-gradient{
 position: absolute;
  inset: 0; /* ครอบเต็มพื้นที่แบบสั้น */
  z-index: 1; /* อยู่เหนือรูป */
      background: linear-gradient(to bottom, rgba(66, 66, 60, 0.9), rgba(126, 132, 83, 0.9));
          opacity: 70%;
    }
    .sec1-head{
    font-size: 80px;
    font-weight: 500;
    color: #d5e03c;
    line-height: 0.8;
    }
    
    .sec4-head{
    font-size: 65px;
    font-weight: 500;
    color: #fff;
    line-height: 0.8;
    }
    .sec1-img-food{

    }
    .sec1-text{
    color: #676c53;
    font-weight: 500;
    }
    .sec1-position{
      width: 60%;
      position: relative;
      left: 0;
;
    }
    .btn-fw {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: 'Prompt', sans-serif;
      font-size: 16px;
      font-weight: 600;
      border-radius: 999px;
      padding: 10px 24px;
      text-decoration: none;
      transition: all 0.2s ease-in-out;
      border: 2px solid transparent;
      cursor: pointer;
    }

    .btn-brown {
      background-color: #5E5043;
      color: #fff;
    }

    .btn-brown:hover {
      background-color: #4d4137;
    }

    .btn-outline-brown {
      background-color: transparent;
      color: #5E5043;
      border: 2px solid #5E5043;
    }

    .btn-outline-brown:hover {
      background-color: #5E5043;
      color: #fff;
    }

    .btn-fw .arrow {
      margin-left: 8px;
      font-weight: bold;
      transform: translateY(1px);
    }
    .sec1-vec1{
        position: relative;
    right: 65px;
    top: 10px;
    }
    .sec1-vec2{
            position: relative;
    top: 35px;
    left: 26px;
    }
    .sec1-vec3{
           position: relative;
           left: 268px;
    bottom: 116px;
    }
    .sec1-w{
        width: 55%;
    height: 130%;
    }
    .sec1-mb{
         margin-top: 85px;
    padding-bottom: 300px;
    }
    .sec1-card1{
            color: #d5e03c;
    background: #675c53;
        border: none;
        left: 110px;
    position: relative;
    }

    .sec1-card2{
            color: #675c53;
    background: #d5e03c;
    border: none;
    position: relative;
    top: 60px;
    }
  #sec2-mobile-slider {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }

  /* ปรับ list ให้ไม่ล้น */
  #sec2-mobile-slider .splide__list {
    margin: 0;
  }

  /* รูปภาพภายในการ์ดไม่เกินขอบ */
  #sec2-mobile-slider img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.5rem;
  }

  /* ปรับ card ให้ไม่กิน padding ของ container */
  #sec2-mobile-slider .card {
    margin: 0 0.5rem;
  }

  #sec5-mobile-slider {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }
  #sec5-mobile-slider img {
    width: 100%;
    height: auto;
    border-radius: 0.75rem 0.75rem 0 0;
  }
  #sec5-mobile-slider .card {
    margin: 0 0.5rem;
  }
   #sec6-mobile-slider {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }

  #sec6-mobile-slider img {
    width: 100%;
    height: auto;
    border-radius: 1.25rem 1.25rem 0 0;
  }

  #sec6-mobile-slider .card {
    margin: 0 0.5rem;
  }
   #sec2-mobile-slider-all {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }

  #sec2-mobile-slider-all img {
    width: 100%;
    height: auto;
    border-radius: 0.75rem 0.75rem 0 0;
  }

  #sec2-mobile-slider-all .card {
    margin: 0 0.5rem;
  }

  /* ป้องกัน Splide ล้น container */
  .splide__track {
    overflow: hidden;
  }
  
 .text-orange {
    color: #f58220;
    font-weight: 600;
  }

  .btn-orange {
    background-color: #f58220;
    color: #fff;
    border-radius: 2rem;
    padding: 0.5rem 1.5rem;
  }

  .btn-orange:hover {
    background-color: #e06f12;
    color: #fff;
  }

  #serviceGroupSlider {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }

  .splide__arrow {
    background-color: #fff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
  }

  .splide__arrow svg {
    fill: #555;
  }

  .splide__arrow--prev {
    left: -1rem;
  }

  .splide__arrow--next {
    right: -1rem;
  }

  .card-img-left {
    width: 50%;
    object-fit: cover;
    border-radius: 1rem 0 0 1rem;
  }

  .sec2-bg-card {
    background-color: #fafbeb;
  }

  .splide__track {
    overflow: hidden;
  }
     .sec1-card3 {
            color: #d5e03c;
    background: #675c53;
        border: none;
        right: 110px;
    position: relative;
    }
    .card-img {
      width: 100%;
      height: 292px;
      object-fit: cover;
    }

    .card-horizontal {
      display: flex;
      flex-direction: row;
    }

    .card-horizontal .card-img-left {
      width: 50%;
      object-fit: cover;
      height: 100%;
    }

    .card-horizontal .card-body {
      padding: 20px;
      flex: 1;
    }
    .rounded-card{
      -webkit-border-top-left-radius: 50px;
-webkit-border-bottom-right-radius: 50px;
-moz-border-radius-topleft: 50px;
-moz-border-radius-bottomright: 50px;
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
    }
    .rounded-righttop{
-webkit-border-top-right-radius: 200px;
-moz-border-radius-topright: 200px;
border-top-right-radius: 200px;
    }
    .sec2-bg-card{
          background: #665c53;
    border: none;
    }
    .sec2-h-card{
      font-size: 30px;
    font-weight: 500;
    color: #d5e03c;
    }
    .sec2-h-card1{
      font-size: 25px;
    font-weight: 500;
    color: #ff9d24;
    }
    .sec2-p-card1{
    font-weight: 500;
    color: white;
    }
    .sec2-pad{
          padding: 0% 250px;
    }
    .sec2-ml-card1{
          margin-left: 150px;
    }
.sec2-pr-card2{
        padding-right: 150px;
    }
    .sec2-height-card{
          height: 205px;
    }
    .sec2-height-next-prev{
      height: 85%;
    }
    .sec2-bg-next-prev{
          background-color: #000000;
    border-radius: 30px;
    width: 50px;
    height: 50px;
    }
    .sec2-btn{
      background: #ff9d24;
    color: white;
    border-radius: 50px;
    padding: 12px 25px;
    }
    .sec2-btn:hover{
      background: #ff9d24;
    color: white;
    border-radius: 50px;
    padding: 12px 25px;
    }
    .sec2-bg{
      background: url(../img/bg2.png);
    }
    .sec2-btn-service{
          padding: 0 20px 20px;
    }
    .sec3-p{
      font-size: 22px;
    padding: 20px 70px;
    line-height: 1.8;    position: relative;
    top: 4px;
    }
.sec3-img3{
    position: relative;
    top: 4px;
    }
    .sec3-img1{
      margin-top: 48px;
      }
    .sec4-btn{
            font-size: 18px;
    background: #ff9d24;
    color: white;
    text-align: center;
    border-radius: 50px;
    padding: 12px 25px;
    margin: 6px 0 18px 0px;
    text-decoration: none;
    }
    .sec4-btn:hover{
      background: #ff9d24;
    color: white;
    border-radius: 50px;
    padding: 12px 25px;
    margin: 6px 0 18px 0px;
    }
    .sec5-btn{
         background: #ffffff;
    color: #665c53;
    font-weight: 500;
    font-size: 20px;
    border-radius: 50px;
    padding: 5px 25px;
    border: #665c53 1px solid;
    }
    .sec5-btn:hover{
          background: #ffffff;
    color: #665c53;
    font-weight: 500;
    font-size: 20px;
    border-radius: 50px;
    border: #665c53 1px solid;
    }
        .sec6-bg {
        background: url(../img/bg6.png);
    }
    .sec6-card{
          background: #665c53;
    color: #fff;
    }
    .sec6-h-card{
      font-size: 40px;
      color: #ff9d24;
    }
    .sec6-card-height{
      height: 290px;
    }
    .sec6-head{
    font-size: 65px;
    font-weight: 600;
    color: #665c53;
    }
    .sec6-foot{
          background: #fff;
    border-radius: 25px;
    padding: 35px 70px 70px 70px;
    }
    /* ปรับให้ indicators เป็นวงกลม */
  .splide__pagination {
  bottom: -32px;
}

.splide__pagination__page {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  margin: 0 5px;
  /* transition: background 0.3s ease; */
}

.splide__pagination__page.is-active {
  background: #555;
}

  /* ซ่อน arrows (carousel-control) */
  .splide__arrow {
    display: none !important;
  }
  .foot-p-sm{
    display: none;
  }
  .foot-p-lg{
    display: block;
  }
  /* SERVICE */
  .service1-pad-h{
        color: #d5e03d;
    font-size: 70px;
    font-weight: 800;
    margin-top: 200px;
    margin-bottom: 100px;
    align-content: center;
  }
  .service1-sec1-h {
      color: #ff9d24;
    font-size: 40px;
    font-weight: 600;
    }
    .service1-sec1-foot{
    font-size: 58px;
    margin-bottom: 50px;
    }
    .service1-sec2-box{
      background: white;
    padding: 25px;
    }
     .branch-card {
      background-color: #fff;
      padding: 15px 15px;
      text-align: center;
      border-radius: 8px;
      box-shadow: 0 4px 30px rgb(225 231 181);
      height: 175px;
    }

    .branch-card img {
      max-width: 100px;
      margin-bottom: 15px;
    }
/* 
    .branch-card.active {
      border: 3px solid orange;
    } */

    .branch-text {
      font-weight: 500;
      font-size: 18px;
    }
     .bg-light-custom {
      background-color: #fdfced;
    }

    .feature-list i {
      color: #f7931e;
      margin-right: 10px;
    }

    .btn-custom {
      background-color: #69594f;
      color: #fff;
      border-radius: 30px;
      padding: 12px 20px;
    }

    .btn-custom i {
      margin-right: 5px;
    }

    .btn-custom:hover {
      background-color: #57483f;
      color: #fff;
    }

    .branch-image {
      object-fit: cover;
      height: 100%;
      width: 90%;
    }
    .service-sec3-h{
          font-size: 40px;
    font-weight: 600;
    }
    .text-orange{
      color: #ff9d24;
    }
    .service-sec3-img-position{
          position: relative;
    right: 50px;
    }
    .service-sec3-pad {
          padding-right: 100px !important;
    }
    .service3-sec1-head {
        font-size: 26px;
    line-height: 1.5;
    }
    /* PARTNERS */
     .partner-section {
          background: #ffffff;
    padding: 3rem 5rem;
    border-radius: 20px;
    box-shadow: 0 16px 50px rgb(158 165 123 / 80%);
    /* max-width: 1000px; */
    margin: 0rem 0px 50px;
    }

    .partner-logos {
          display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 3rem;
    align-items: center;
    justify-items: center;
    }

    .partner-logos img {
      object-fit: contain;
      max-width: 100%;
    }

    .section-title-partners {
      text-align: center;
    font-weight: 500;
    font-size: 50px;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #665c53;
    }

    .certification-section {
      background: #ffffff;
      padding: 2rem 1rem;
      border-radius: 20px;
      box-shadow: 0 16px 50px rgb(158 165 123 / 80%);
      margin: 1rem auto;
    }

    .certification-logos {
          display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0rem;
    }

    .certification-logos img {
      object-fit: contain;
    }
    .partners-bg{
      background: url(../img/partners-bg1.png);
    background-position: bottom;
    background-repeat: no-repeat;
    }
    /* NEWS */
    .pt-cus{
    padding-top: 150px;
    }
    .news-head{
    font-size: 65px;
    font-weight: 600;
    color: #665c53;
    }
    .news-h{
          font-size: 25px;
    line-height: 1;
    letter-spacing: 0px;
    }
    .news-sec1-box {
          width: 80%;
    padding: 50px 25px 50px 25px;
    border: 3px solid #d5df3e;
    border-left: none;
    }
    .new-sec1-btn{
    background: #ffffff;
    color: #665c53;
    font-weight: 500;
    border-radius: 50px;
    width: 32%;
    padding: 8px;
    border: #665c53 1px solid;
    }
    .custom-pagination .page-link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  padding: 0;
  margin: 0 6px;
  text-align: center;
  line-height: 36px;
  color: #000;
  border: 1px solid #ddd;
  background-color: #fff;
  font-weight: 500;
  box-shadow: none;
  transition: 0.2s ease;
}

.custom-pagination .page-item.active .page-link {
  background-color: #d5e03c;
  border-color: #d5e03c;
  color: #000;
}

.custom-pagination .page-link:hover {
  background-color: #f1f1f1;
}

.custom-pagination .page-link.arrow {
  font-size: 14px;
  background: none;
  border: none;
  color: #888;
}
/* JOBS */
.job-head{
      text-align: center;
    font-weight: 500;
    font-size: 40px;
    color: #665c53;
}
.job-btn1 {
    color: #665c53;
    font-weight: 600;
    border: #665c53 1px solid;
}
.job-btn2 {
    background: #665c53;
    color: #fff;
    font-weight: 500;
    border-radius: 50px;
    padding: 12px 25px;
    border: #665c53 1px solid;
}
.job-head-pad{
  padding: 175px 0px 15px 75px;
}
.job-head-text{
  font-size: 70px;
    line-height: 0.8;
    font-weight: 500;
}
.carousel-indicators button {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50%; /* ทำให้เป็นวงกลม */
  background-color: #ccc;
  border: none;
  margin: 0 5px;
  opacity: 1;
  transition: background-color 0.3s;
}

.carousel-indicators button.active {
  background-color: #fff; /* สีตอน active */
}
.job-banner{
      background: url(../img/job-bg.png) no-repeat;
    background-size: cover;
}
/* CONTACT */
.con-h{
     color: #d6e03c;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
    padding-bottom: 15px;
}
.map-height{
      height: 550px;
}
.bg-card-contact{
  background: #d5e03c;
    padding: 35px 12px;
}
.con-btn-card-pad{
      font-weight: 600;
    padding-top: 12px;
    padding-bottom: 12px;
}
.lh-15{
        line-height: 1.5;
}
/* ABOUT-US */
.about-bg {
    background: url(../img/about-bg1.png) no-repeat;
}
.about-bg-mo {
    background: url(../img/about-bg-mo.png) no-repeat;
        background-size: cover;
}
.about-fs-h{
  font-size: 60px;
}.about-fs-sub-h{
  font-size: 28px;
}
.about-sec1-pt{
      padding-top: 90px;
}
.about-value{
      display: flex;
    line-height: 1.5;
    /* align-items: center; */
    justify-content: center;
}
.about-value-w80{
  width: 60%;
}
.about-sec2-h {
    color: #665c53;
    font-size: 75px;
    font-weight: 600;
    margin-top: 50px;
    }
.vision-mission-section {
  background: linear-gradient(to bottom, #fff 0%, #f6f6f6 100%);
}
.mission-box {
padding: 25px 0px 40px 70px;
}

.mission-item {
  background-color: white;
  font-size: 22px;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  border-radius: 1rem;
  color: #665c53;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.about-sec3-h {
    color: #665c53;
    font-size: 75px;
    font-weight: 600;
    margin-top: 10px;
}
.about-sec3-sub-h {
    color: #ff9d24;
    font-size: 40px;
    font-weight: 600;
}
.about-vec1{
    position: absolute;
    margin-top: 50px;
    left: -6.7%;
}
.about-vec2 {
        position: absolute;
    right: -45%;
    bottom: -150px;
    max-width: 420px;
    z-index: 1;
}
.h-text {
    height: 100%;
}
.w-sec3-text{
  width: 75%;
}
  .breadcrumb {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
  }

  .breadcrumb-item {
    display: flex;
    align-items: center;
  }

  .breadcrumb-item + .breadcrumb-item::before {
    content: "›"; /* ลูกศร */
    padding: 0 8px;
    color: #888;
    font-weight: bold;
  }

  .breadcrumb-item a {
    text-decoration: none;
    color: #d5e03c;
    transition: color 0.3s;
  }

  .breadcrumb-item a:hover {
    color: #d5e03c;
  }

  .breadcrumb-item.active {
    color: #675c53;
    font-weight: bold;
  }
  .share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
}

/* ปุ่มแต่ละอัน */
.share-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  font-size: 15px;
  transition: all 0.25s ease;
  cursor: pointer;
}

/* สีเฉพาะของแต่ละแพลตฟอร์ม */
.share-icon.facebook { background-color: #1877f2; }
.share-icon.twitter { background-color: #1da1f2; }
.share-icon.email { background-color: #6c757d; }
.share-icon.more { background-color: #0d6efd; }

/* hover effect */
.share-icon:hover {
  transform: translateY(-3px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  opacity: 0.9;
}

/* Responsive Adjustments */
@media (max-width: 767.98px) {
  .vision-box,
  .mission-box {
    min-height: auto;
  }

  .vision-box h2,
  .vision-box p {
    max-width: 100%;
  }
  .service-scroll {
    overflow-y: auto;
    height: auto;
}
}
  @media (min-width: 1401px) and (max-width: 1600px){
.sec1-vec3 {
    position: relative;
    left: 0;
    bottom: 116px;
}
.sec1-bg{
  background: url(../img/bg1-1.png) no-repeat;
    background-position: top center !important;
    }
    .sec1-position {
        width: 60%;
    position: relative;
    left: 0;
}
.sec1-vec2 {
    position: relative;
    top: 55px;
    left: -21px;
}
.sec1-w {
    width: 85%;
    height: 130%;
}
.sec1-card1 {
    color: #d5e03c;
    background: #675c53;
    border: none;
    left: 0;
    position: relative;
}
.sec1-card3 {
    color: #d5e03c;
    background: #675c53;
    border: none;
    right: 0;
    position: relative;
}
.sec2-pad {
    padding: 0px 15px;
    background-repeat: round !important;
}
.sec3-p {
    font-size: 22px;
    padding: 0px 0px;
    line-height: 1.8;
    position: relative;
    top: 4px;
}
.sec3-img3{
  position: relative;
  top: 0px;
  width: 100%;
  }
  .sec3-img1{
    width: 65%;
    margin-top: 25px;
    }
    .sec3-img2{
      width: 55%;
      }
       /* SERVICE */
       .branch-image {
    object-fit: cover;
    height: 100%;
    width: 108%;
}
.service-sec3-pad {
    padding-right: 80px !important;
}
.certification-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 6rem;
}
/* JOBS */
.job-banner{
      background: url(../img/job-bg.png) no-repeat;
    background-size: cover;
}
/* ABOUT */
.about-vec2 {
    position: absolute;
    right: -35%;
    bottom: -20%;
    max-width: 350px;
    z-index: 1;
}
.about-bg {
    background: url(../img/about-bg1.png) no-repeat center top;
}
.about-sec2-h {
    color: #665c53;
    font-size: 62px;
    font-weight: 600;
    margin-top: 50px;
}
.about-sec3-h {
    color: #665c53;
    font-size: 62px;
    font-weight: 600;
    margin-top: 10px;
}
.about-vec1 {
    display: none;
}
.h-text {
    height: 60%;
}
  }
  @media (min-width: 1201px) and (max-width: 1400px){
.sec1-vec3 {
    position: relative;
    left: 0;
    bottom: 116px;
}
.sec1-bg{
  background: url(../img/bg1-1.png);
    background-position: top center !important;
    }
    .sec1-position {
        width: 60%;
    position: relative;
    left: 0;
}
.sec1-vec2 {
    position: relative;
    top: 55px;
    left: -21px;
}
.sec1-w {
    width: 85%;
    height: 150%;
}
.sec1-card1 {
    color: #d5e03c;
    background: #675c53;
    border: none;
    left: 0;
    position: relative;
}
.sec1-card3 {
    color: #d5e03c;
    background: #675c53;
    border: none;
    right: 0;
    position: relative;
}
.sec2-pad {
    padding: 0px 15px;
    background-repeat: round !important;
}
.sec3-p {
    font-size: 22px;
    padding: 0px 0px;
    line-height: 1.8;
    position: relative;
    top: 4px;
}
.sec3-img3{
  position: relative;
  top: 0px;
  width: 100%;
  }
  .sec3-img1{
    width: 65%;
    margin-top: 25px;
    }
    .sec3-img2{
      width: 55%;
      }
       /* SERVICE */
       .branch-image {
    object-fit: cover;
    height: 100%;
    width: 108%;
}
.service-sec3-pad {
    padding-right: 80px !important;
}
.certification-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 6rem;
}
/* JOBS */
.job-banner{
      background: url(../img/job-bg.png) no-repeat;
    background-size: cover;
}
/* ABOUT */
.about-vec2 {
    position: absolute;
    right: -35%;
    bottom: -20%;
    max-width: 350px;
    z-index: 1;
}
.about-bg {
    background: url(../img/about-bg1.png) no-repeat center top;
}
.about-sec2-h {
    color: #665c53;
    font-size: 62px;
    font-weight: 600;
    margin-top: 50px;
}
.about-sec3-h {
    color: #665c53;
    font-size: 62px;
    font-weight: 600;
    margin-top: 10px;
}
.about-vec1 {
    display: none;
}
.h-text {
    height: 60%;
}
  }
    @media (min-width: 992px) and (max-width: 1200px){
.sec1-bg{
  background: url(../img/bg1-1.png);
    background-position: top center !important;
    }
    .sec1-position {
    width: 92%;
    position: relative;
    left: 0%;
}
.sec1-head {
  font-size: 52px;
  font-weight: 600;
  color: #d5e03c;
  line-height: 0.9;
}
.sec1-w {
  width: 100%;
  height: 140%;
}
.sec1-card1 {
    color: #d5e03c;
    background: #675c53;
    border: none;
    left: 0;
    position: relative;
}
.sec1-card3 {
    color: #d5e03c;
    background: #675c53;
    border: none;
    right: 0;
    position: relative;
}
.sec1-mb {
  margin-top: 85px;
  padding-bottom: 220px;
}
.sec2-pad {
    padding: 0px 15px;
    background-repeat: round !important;
}
.sec2-ml-card1 {
  margin-left: 0;
}
.sec2-pr-card2 {
  padding-right: 1rem;
}
.card-horizontal .card-img-left {
  width: 50%;
  object-fit: fill;
  height: 100%;
}
.sec3-p {
  font-size: 18px;
  padding: 0px 0px;
  line-height: 1.8;
  position: relative;
  top: 4px;
}
.sec1-vec1 {
  position: relative;
  width: 28%;
  right: 65px;
  top: 80px;
}
    .sec1-vec2 {
      position: relative;
      top: 77px;
      left: -12px;
      width: 30%;
    }
      .sec1-vec3 {
        position: relative;
        left: 28px;
        bottom: 20px;
        width: 28%;
    }
    .sec3-img3{
      position: relative;
      top: 4px;
      width: 100%;
      }
      .sec3-img1{
        width: 65%;
        margin-top: 25px;
        }
        .sec3-img2{
          width: 55%;
          }
          .sec4-bg{
            background-position: center !important;
          }
          
          .sec6-card-height {
            height: 335px;
        }
        .sec6-h-card {
          font-size: 32px;
      }
      .sec6-bg{
        background-position: center !important;
      }
       /* SERVICE */
.branch-card {
    background-color: #fff;
    padding: 15px 15px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    height: 220px;
}
.service-sec3-pad {
    padding-right: 40px !important;
    padding-left: 15px !important;
}
.branch-image {
    object-fit: cover;
    height: 100%;
    width: 104%;
}
.service-sec3-img-position {
    position: relative;
    right: 25px;
}
/* PARTNERS */
.certification-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 3rem;
}
/* NEWS */
.news-sec1-box {
    width: 100%;
    padding: 35px 15px 35px 15px;
    border: 3px solid #d5df3e;
    border-left: none;
}
/* JOBS */
.job-banner {
    background: url(../img/job-bg.png) no-repeat center;
    background-size: cover;
}
/* ABOUT */
    .about-bg {
        background: url(../img/about-bg1.png) no-repeat center top;
    }
    .about-sec2-h {
    color: #665c53;
    font-size: 52px;
    font-weight: 600;
    margin-top: 20px;
}
.about-vec1 {
    display: none;
}
.about-vec2 {
    display: none;
}
    }
    @media (min-width: 768px) and (max-width: 991.98px) {
      .service-scroll {
    overflow-y: auto;
    height: auto;
}
      .sec1-col12 {
        width: 98%;
    }
    .sec1-bg{
      background: url(../img/bg1-1.png);
        background-position: top center !important;
        }
        .sec1-position {
          width: 100%;
          position: relative;
          left: 0%;
      }
    .sec1-w {
      width: 100%;
      height: 100%;
    }
    .sec4-head {
    font-size: 50px;
    font-weight: 600;
    color: #fff;
    line-height: 0.9;
}
.sec6-head {
    font-size: 50px;
    font-weight: 600;
    color: #665c53;
}
    .sec1-card1 {
        color: #d5e03c;
        background: #675c53;
        border: none;
        left: 0;
        position: relative;
    }
    .sec1-card3 {
        color: #d5e03c;
        background: #675c53;
        border: none;
        right: 0;
        position: relative;
    }
    .sec1-mb {
      margin-top: 85px;
      padding-bottom: 140px;
    }
    .sec2-pad {
        padding: 0px 15px;
        background-repeat: round !important;
    }
    .sec2-ml-card1 {
      margin-left: 0;
    }
    .sec2-pr-card2 {
      padding-right: 1rem;
    }
    .card-horizontal .card-img-left {
      width: 50%;
      object-fit: fill;
      height: 100%;
    }
    .sec3-p {
      font-size: 14px;
      padding: 0px 0px;
      line-height: 1.8;
      position: relative;
      top: 4px;
      margin-bottom: 8px;
  }
    .sec1-vec1 {
      position: relative;
      width: 28%;
      right: 42px;
      top: 57px;
    }
        .sec1-vec2 {
          position: relative;
          top: 41px;
          left: 0px;
          width: 30%;
        }
          .sec1-vec3 {
            position: relative;
            left: 28px;
            bottom: 30px;
            width: 28%;
        }
        .sec3-img3{
          position: relative;
          top: 4px;
          width: 100%;
          }
          .sec3-img1 {
            width: 60%;
            margin-top: 0;
        }
            .sec3-img2{
              width: 55%;
              }
              .sec4-bg{
                background-position: center !important;
              }
              .sec6-card-height {
                height: 190px;
            }
            .sec6-h-card {
              font-size: 25px;
          }
          .sec6-bg{
            background-position: center !important;
          }
          .line-clamp-3 {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .line-clamp-5 {
            display: -webkit-box;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .line-clamp-8 {
            display: -webkit-box;
            -webkit-line-clamp: 8;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .foot-p-sm{
            display: block;
          }
          .foot-p-lg{
            display: none;
          }
          .sec6-foot {
            background: #fff;
            border-radius: 25px;
            padding: 35px 52px 70px 50px;
        }
        .sec2-h-card {
          font-size: 18px;
          font-weight: 500;
          color: #d5e03c;
      }
      .sec2-height-card {
        height: 120px;
    }
    .carousel-item {
      height: 470px;
      background-size: cover;
      background-position: center;
      position: relative;
  }
  .sec1-head {
    font-size: 50px;
    font-weight: 600;
    color: #d5e03c;
    line-height: 0.9;
}
/* SERVICE */
.service1-sec1-foot {
    font-size: 42px;
    margin-bottom: 50px;
}
.service-sec3-pad {
    padding-right: 48px !important;
}
.position-ham{
      position: relative;
    bottom: 20px;
}
.logo-img {
    height: 130px;
    position: relative;
    top: 0;
}
.service1-pad-h {
    color: #d5e03d;
    font-size: 55px;
    font-weight: 800;
    margin-top: 160px;
    margin-bottom: 60px;
    align-content: center;
}
/* PARTNERS */
.partner-logos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
    align-items: center;
    justify-items: center;
}
/* NEWS */
.news-head{
  font-size: 50px;
        font-weight: 600;
        color: #665c53;
}
.news-h {
    font-size: 26px;
    line-height: 1;
    letter-spacing: 0.5px;
}
.news-sec1-box {
    width: 100%;
    padding: 35px 15px 35px 15px;
    border: 3px solid #d5df3e;
    border-top: none;
}
/* JOBS */
    .job-banner {
        background: url(../img/job-bg.png) no-repeat center top;
        background-size: auto;
    }
.job-head-text {
    font-size: 50px;
    line-height: 1.1;
}
.job-head-pad {
    padding: 125px 0px 20px 41px;
}
.text-align-last-center {
  text-align-last: center;
}
/* ABOUT */
.about-sec2-h {
    color: #665c53;
    font-size: 52px;
    font-weight: 600;
    margin-top: 20px;
}
.about-bg {
    background: url(../img/about-bg1.png) no-repeat center;
}
.mission-box {
            padding: 0px 0px 50px;
}
.about-sec1-pt {
    padding-top: 50px;
}
.h-text {
    height: 75%;
}
.about-sec3-h {
    color: #665c53;
    font-size: 52px;
    font-weight: 600;
    margin-top: 10px;
}
.about-sec3-sub-h {
    color: #ff9d24;
    font-size: 35px;
    font-weight: 600;
}
.w-sec3-text{
  width: 100%;
}
        }
        @media (min-width: 576px) and (max-width: 767.98px) {
          .sec1-col12 {
            width: 98%;
        }
        .sec1-bg{
           background: url(../img/bg1-mo1.png);
        background-position: center top !important;
                background-size: cover;
          /* background: url(../img/bg1-1.png);
            background-position: top center !important; */
            }
                .sec1-img-food {
        width: 80%;
        margin-top: 100px;
        margin-bottom: 30px;
    }
            .sec1-position {
                      width: 100%;
        position: relative;
        left: 0%;
          }
        .sec1-w {
          width: 100%;
        height: 180px;
        }
        .sec1-card1 {
            color: #d5e03c;
            background: #675c53;
            border: none;
            left: 0;
            position: relative;
        }
        .sec1-card2 {
              color: #675c53;
              background: #d5e03c;
              border: none;
              position: relative;
              top: 0;
              margin: 50px 0px;
          }
        .sec1-card3 {
            color: #d5e03c;
            background: #675c53;
            border: none;
            right: 0;
            position: relative;
        }
        .sec1-mb {
                  margin-top: 85px;
        padding-bottom: 75px;
        }
        .sec2-pad {
            padding: 0px 15px;
            background-repeat: round !important;
        }
        .sec2-ml-card1 {
          margin-left: 0;
        }
        .sec2-pr-card2 {
          padding-right: 1rem;
        }
        .card-horizontal .card-img-left {
          width: 50%;
          object-fit: fill;
          height: 100%;
        }
        .sec3-p {
          font-size: 14px;
          padding: 0px 0px;
          line-height: 1.8;
          position: relative;
          top: 4px;
          margin-bottom: 8px;
      }
        .sec1-vec1 {
          position: relative;
          width: 28%;
          right: 42px;
          top: 57px;
        }
            .sec1-vec2 {
              position: relative;
              top: 41px;
              left: 0px;
              width: 30%;
            }
              .sec1-vec3 {
                position: relative;
                left: 28px;
                bottom: 30px;
                width: 28%;
            }
            .sec3-img3{
              position: relative;
              top: 4px;
              width: 100%;
              }
              .sec3-img1 {
                width: 60%;
                margin-top: 0;
            }
                .sec3-img2{
                  width: 55%;
                  }
                  .sec4-bg{
                    background-position: center !important;
                  }
                  .sec6-card-height {
                    height: 190px;
                }
                .sec6-h-card {
                  font-size: 22px;
              }
              .sec6-bg{
                background-position: center !important;
              }
              .line-clamp-3 {
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              .line-clamp-5 {
                display: -webkit-box;
                -webkit-line-clamp: 5;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              .line-clamp-8 {
                display: -webkit-box;
                -webkit-line-clamp: 8;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              .foot-p-sm{
                display: block;
              }
              .foot-p-lg{
                display: none;
              }
              .sec6-foot {
                background: #fff;
                border-radius: 25px;
                padding: 35px 52px 70px 50px;
            }
            .sec2-h-card {
              font-size: 18px;
              font-weight: 500;
              color: #d5e03c;
          }
          .sec2-height-card {
            height: 120px;
        }
        .carousel-item {
          height: 470px;
          background-size: cover;
          background-position: center;
          position: relative;
      }
      .sec1-head {
        font-size: 50px;
        font-weight: 600;
        color: #d5e03c;
        line-height: 0.9;
    }
    /* NEWS */
.news-sec1-box {
    width: 100%;
    padding: 35px 15px 35px 15px;
    border: 3px solid #d5df3e;
    border-top: none;
}
/* CONTACT */
.text-align-last-center {
  text-align-last: center;
}
/* ABOUT */
.about-sec2-h {
    color: #665c53;
    font-size: 52px;
    font-weight: 600;
    margin-top: 20px;
}
.about-bg {
    background: url(../img/about-bg1.png) no-repeat center;
}
.mission-box {
            padding: 0px 0px 50px;
}
.about-sec1-pt {
    padding-top: 50px;
}
.h-text {
    height: 75%;
}
.about-sec3-h {
    color: #665c53;
    font-size: 52px;
    font-weight: 600;
    margin-top: 10px;
}
.about-sec3-sub-h {
    color: #ff9d24;
    font-size: 35px;
    font-weight: 600;
}
.w-sec3-text{
  width: 100%;
}
            }
            @media (min-width: 300px) and (max-width: 575.98px) {
              .foot-height{
                height: 100px;
              }
              .sec1-col12 {
                width: 98%;
            }
            .sec1-bg{
                      background: none;
                      background-position: center top !important;
                }
                .sec1-vec-none{
          display: none;
        }
                .sec1-position {
                  width: 100%;
                  position: relative;
                  left: 0%;
              }
              .sec1-w {
                width: 100%;
        height: 180px;
            }
            .sec1-card2 {
              color: #675c53;
              background: #d5e03c;
              border: none;
              position: relative;
              top: 0;
              margin: 50px 0px;
          }
            .sec1-card1 {
                color: #d5e03c;
                background: #675c53;
                border: none;
                left: 0;
                position: relative;
            }
            .sec1-card3 {
                color: #d5e03c;
                background: #675c53;
                border: none;
                right: 0;
                position: relative;
            }
            .sec1-mb {
                      margin-top: 85px;
        padding-bottom: 85px;
            }
            .sec2-pad {
                padding: 0px 15px;
                background-repeat: round !important;
                background: none !important;
            }
            .sec2-ml-card1 {
              margin-left: 0;
            }
            .sec2-pr-card2 {
              padding-right: 1rem;
            }
            .card-horizontal .card-img-left {
              width: 50%;
              object-fit: fill;
              height: 100%;
            }
            .sec3-p {
              font-size: 15px;
        padding: 0px 0px;
        line-height: 1.8;
        position: relative;
        top: 4px;
          }
            .sec1-vec1 {
              position: relative;
              width: 28%;
              right: 42px;
              top: 57px;
            }
                .sec1-vec2 {
                  position: relative;
                  top: 41px;
                  left: 0px;
                  width: 30%;
                }
                  .sec1-vec3 {
                    position: relative;
                    left: 28px;
                    bottom: 30px;
                    width: 28%;
                }
                .sec3-img3{
                  position: relative;
        top: 0;
        width: 100%;
                  }
                  .sec3-img1 {
                    width: 65%;
                    margin-top: 0;
                }
                    .sec3-img2{
                      width: 55%;
                      }
                      .sec4-bg{
                        background-position: top !important;
        background-repeat: no-repeat !important;
                      }
                      .sec4-head {
                        font-size: 40px;
                        font-weight: 600;
                        color: #fff;
                        line-height: 0.9;
                    }
                      .sec6-card-height {
                        height: 190px;
                    }
                    .sec6-h-card {
                      font-size: 25px;
                  }
                      .sec6-bg {
        background: none;
        background-position: center !important;
    }
                  .line-clamp-3 {
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  }
                  .line-clamp-5 {
                    display: -webkit-box;
                    -webkit-line-clamp: 5;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  }
                  .line-clamp-8 {
                    display: -webkit-box;
                    -webkit-line-clamp: 8;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  }
                  .foot-p-sm{
                    display: block;
                  }
                  .foot-p-lg{
                    display: none;
                  }
                  .sec6-foot {
                    background: #fff;
                    border-radius: 25px;
                    padding: 35px 25px 70px 25px;
                }
                .sec2-h-card {
                  font-size: 18px;
                  font-weight: 500;
                  color: #d5e03c;
              }
              .sec2-height-card {
                height: 120px;
            }
            .carousel-item {
                      height: 940px;
        background-size: cover;
        background-position: center;
        position: relative;
          }
          .carousel-item-h {
              height: 550px !important;
          }
          .sec1-head {
            font-size: 40px;
        font-weight: 600;
        color: #d5e03c;
        line-height: 0.9;
        }
        .sec1-h-fs{
          letter-spacing: normal;
    font-size: 52px !important;
            /* text-shadow: 1px 1px 3px #675c53; */
    }
        .sec1-img-food {
                        width: 46%;
        /* margin-top: 100px; */
        /* margin-bottom: 30px; */
        position: absolute;
        right: -11vw;
        top: -37px;
      }
      .sec6-head {
    font-size: 40px;
    font-weight: 600;
    color: #665c53;
}
.sec4-btn {
    background: #ff9d24;
    font-size: 18px;
    color: white;
    border-radius: 50px;
    padding: 10px 8px;
    margin: 6px 0 18px 0px;
}
.sec4-btn:hover{
  background: #ff9d24;
    font-size: 12px;
    color: white;
    border-radius: 50px;
    padding: 10px 8px;
    margin: 6px 0 18px 0px;
}
.sec3-sm-none{
  display: none;
}
/* SERVICE */
.service1-pad-h {
    color: #d5e03d;
    font-size: 40px;
    font-weight: 800;
        margin-top: 180px;
    margin-bottom: 80px;
    align-content: center;
}
.logo-img {
    height: 130px;
    position: relative;
    top: 0;
}
.position-ham{
      position: relative;
    bottom: 20px;
}
.service1-sec1-foot {
    font-size: 26px;
    margin-bottom: 50px;
}
.service-sec3-pad {
    padding: 50px 15px !important;
}
.service-sec3-h {
    font-size: 32px;
    font-weight: 600;
}
.service3-sec1-head {
    font-size: 18px;
    line-height: 2;
}
.sec3-orange{
      margin-left: 22px;
}
.carousel-caption h1 {
    font-size: 3rem;
    font-weight: bold;
}
.footer-bg{
  background-color: #5E5043; 
  color: white; 
  padding: 50px 0 0;
}
/* PARTNERS */
.partner-logos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
    gap: 2rem;
    align-items: center;
    justify-items: center;
}
.partner-section {
    background: #ffffff;
    padding: 1rem 1rem;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    /* max-width: 1000px; */
    margin: 0rem 0px 50px;
}
/* NEWS */
.news-head {
    font-size: 40px;
    font-weight: 600;
    color: #665c53;
}
.news-sec1-box {
    width: 100%;
    padding: 35px 15px 35px 15px;
    border: 3px solid #d5df3e;
    border-top: none;
}
/* JOBS */
.job-banner {
    background: url(../img/job-bg-mo.png) no-repeat center;
    background-size: cover;
}
.job-head-pad {
    padding: 125px 0px 15px 0px;
}
.job-head-text {
    font-size: 50px;
    line-height: 1.1;
}
/* CONTACT */
.text-align-last-center {
  text-align-last: center;
}
.con-h {
    color: #d6e03c;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.1;
    padding-bottom: 15px;
    -webkit-text-decorations-in-effect: none;
}
/* ABOUT */
.about-sec2-h {
    color: #665c53;
    font-size: 52px;
    font-weight: 600;
    margin-top: 20px;
}
.about-bg {
    background: url(../img/about-bg1.png) no-repeat center;
}
.mission-box {
            padding: 0px 0px 50px;
}
.about-sec1-pt {
    padding-top: 50px;
}
.h-text {
    height: 65%;
}
.about-sec3-h {
    color: #665c53;
    font-size: 52px;
    font-weight: 600;
    margin-top: 40px;
}
.about-sec3-sub-h {
    color: #ff9d24;
    font-size: 35px;
    font-weight: 600;
}
.w-sec3-text{
  width: 100%;
}
.sec3-about-bg-mo{
      background: #fafbeb;
}
.about-fs-h {
    font-size: 52px;
}
            }
                @media (min-width: 300px) and (max-width: 991.98px) {
                      .map-height {
        height: 300px;
    }
      .dropdown-menu {
  background-color: #212529; /* หรือใช้สีเดียวกับ .text-bg-dark */
  border: none;
  border-radius: 0.5rem;
}

/* ปรับตัวอักษร dropdown ให้สีขาว */
.dropdown-menu .dropdown-item {
  color: #fff;
}

/* ปรับตอน hover ให้มีพื้นหลังโปร่งใส */
.dropdown-menu .dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.accordion-button:focus {
    z-index: 3;
    outline: 0;
    box-shadow: none;
}
.list-group-flush>.list-group-item:last-child {
    border-bottom-width: 1px;
}
.accordion-button1 {
    border: none;
        font-size: 22px;
        font-weight: 700;
}
.accordion-button1.collapsed .icon-arrow {
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

.accordion-button1:not(.collapsed) .icon-arrow {
  transform: rotate(180deg); /* ลูกศรชี้ขึ้นเมื่อเปิด */
}
/* ABOUT */
.about-vec1 {
    display: none;
}
.about-vec2 {
    display: none;
}
    /* .sec1-vec-none {
        display: none;
    } */
    }

.cloudmove-1 {
  animation: cloudMove 5s ease-in-out infinite;
}
.cloudmove-2 {
  animation: cloudMove 7s ease-in-out infinite;
}
.cloudmove-3 {
  animation: cloudMove 9s ease-in-out infinite;
}
  @keyframes cloudMove {
  0%   { transform: translateX(0px) translateY(0px) scale(1); }
  25%  { transform: translateX(10px) translateY(-2px) scale(1.02); }
  50%  { transform: translateX(20px) translateY(2px) scale(1); }
  75%  { transform: translateX(10px) translateY(3px) scale(0.98); }
  100% { transform: translateX(0px) translateY(0px) scale(1); }
}

.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  width: 100% !important;
}

/* =========================================================
   FoodWorld — Our Services (CSS)
   โทน CI: เขียว/เหลือง แบบเรียบแต่หรู + glass เบาๆ
   ใช้งานร่วมกับ Bootstrap 5 ได้ทันที
   ========================================================= */


/* ---------- โครงสร้างหลักของเซกชัน ---------- */
.fw-services{
  position: relative;
  padding: clamp(2rem, 2vw + 1rem, 4rem) 0;
  background: linear-gradient(180deg, var(--fw-bg), #fff);
  isolation: isolate;
}

/* แสงนุ่มๆ เพิ่มมิติแบบสะอาดตา */
.fw-services::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(40rem 20rem at -10% 30%, rgba(182,224,122,.35), transparent 60%),
    radial-gradient(36rem 18rem at 110% 70%, rgba(246,235,97,.28), transparent 60%);
  pointer-events:none;
  z-index:0;
}

/* ---------- ส่วนหัวข้อ ---------- */
.fw-services__header{
  position: relative;
  z-index:1;
}
.fw-services__title{
  margin: 0 0 .25rem;
  font-weight: 800;
  letter-spacing:.4px;
  color: var(--fw-ink);
  text-transform: uppercase;
}
.fw-services__subtitle{
  margin: 0 auto;
  max-width: 760px;
  color: var(--fw-muted);
}

/* ---------- ชิปตัวกรอง (ไม่มี JS ก็แสดงผลสวย) ---------- */
.fw-services__chips{
  position: relative;
  z-index:1;
}
.fw-chip{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  font-weight:600;
  font-size:.95rem;
  color: var(--fw-ink);
  background:
    linear-gradient(180deg, #fff, #f8faf9) padding-box,
    linear-gradient(135deg, var(--fw-lime), var(--fw-yellow)) border-box;
  border: 1px solid transparent;
  text-decoration: none;
  box-shadow: var(--fw-shadow);
  transition: transform .2s, box-shadow .2s, background .2s;
}
.fw-chip:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px rgba(34,38,49,.12); }
.fw-chip.is-active{
  color: var(--fw-green-dark);
  box-shadow: var(--fw-shadow-lg);
}

/* ---------- การ์ดบริการ (Glass + Soft Motion) ---------- */
.fw-card{
  position: relative;
  display:flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.96));
  border: 1px solid var(--fw-line);
  border-radius: var(--fw-radius);
  /* box-shadow: var(--fw-shadow); */
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.fw-card:hover{
  /* transform: translateY(-6px);
  box-shadow: var(--fw-shadow-lg); */
}

/* วงแหวนไฮไลต์รอบกรอบแบบ gradient บางๆ */
.fw-card::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: inherit;
  padding:1px;
  background: linear-gradient(135deg, rgba(182,224,122,.7), rgba(246,235,97,.7));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:0; transition:opacity .35s;
  pointer-events:none;
}
.fw-card:hover::before{ opacity:.8; }

/* ---------- ส่วนรูปภาพ ---------- */
.fw-card__media{
  position: relative;
  margin:0;
  overflow:hidden;
  aspect-ratio: 16/9;
  background: #f4f7f1;
}
.fw-card__img{
  width:100%; height:100%;
  object-fit: cover;
  /* transform: translateZ(0);
  transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .6s;
  filter: saturate(1.02) contrast(1.02); */
}
.fw-card:hover .fw-card__img{
  /* transform: scale(1.04);
  filter: saturate(1.08) contrast(1.05); */
}

/* ป้ายหมวด */
.fw-badge{
  position:absolute;
  left:12px; bottom:12px;
  padding:6px 10px;
  font-weight:700;
  font-size:.8rem;
  color:#17321f;
  background: linear-gradient(180deg, #fff, #f3f8ef);
  border:1px solid var(--fw-line);
  border-radius:999px;
  box-shadow: 0 6px 16px rgba(34,38,49,.12);
}

/* ---------- ตัวเนื้อหา ---------- */
.fw-card__body{
  display:flex;
  flex-direction: column;
  flex-grow: 1;
  gap: .75rem;
  padding: 1.1rem 1.1rem 1.25rem;
}
.fw-card__title{
  margin:0;
  font-size: clamp(1.05rem, .9rem + .5vw, 1.35rem);
  line-height:1.25;
  font-weight:800;
  letter-spacing:.2px;
}
.fw-card__link{
  font-size: 40px;
    line-height: 1;
  color: #675c53;
  text-decoration:none;
  background: linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;
  transition: background-size .35s ease, color .2s ease;
}
.fw-card__link:hover{ background-size: 100% 2px; color: var(--fw-green-dark); }
.fw-card__desc{
  margin:0;
  color: var(--fw-muted);
  line-height:1.5;
}

/* ไฮไลต์คุณสมบัติ */
.fw-card__features{
  display:grid;
  grid-template-columns: 1fr;
  gap:.35rem;
  padding-left: 1.2rem;
  margin: .25rem 0 0;
  color: var(--fw-ink);
}
.fw-card__features li{
  position:relative;
}
.fw-card__features li::marker{ color: var(--fw-green); }

/* ---------- ปุ่ม ---------- */
.fw-card__actions{ margin-top: .25rem; }
.fw-btn{
  --ring: rgba(58,162,92,.25);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  height:42px;
  padding: 0 16px;
  border-radius:999px;
  font-weight:700;
  background:
    linear-gradient(180deg, #fff, #f9fafb) padding-box,
    linear-gradient(135deg, var(--fw-lime), var(--fw-yellow)) border-box;
  border:1px solid transparent;
  color: var(--fw-ink);
  text-decoration:none;
  box-shadow: 0 8px 20px rgba(58,162,92,.12);
  transition: transform .2s, box-shadow .2s, background .2s;
}
.fw-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(58,162,92,.18), 0 0 0 6px var(--ring);
  color: var(--fw-green-dark);
}
.fw-btn__icon{ transition: transform .25s; }
.fw-btn:hover .fw-btn__icon{ transform: translateX(3px); }

/* ปุ่มหลักสำหรับ CTA ใต้สุด */
.fw-btn--primary{
  background:
    linear-gradient(180deg, #fff, #f6fff0) padding-box,
    linear-gradient(135deg, var(--fw-green), var(--fw-lime)) border-box;
  color: var(--fw-green-dark);
}

/* ---------- CTA กลางล่าง ---------- */
.fw-services__cta{ position: relative; z-index:1; }

/* ---------- ระยะห่างและกริด ---------- */
@media (min-width: 768px){
  .fw-card__body{ padding: 1.25rem 1.25rem 1rem; }
  .fw-card__features{
    grid-template-columns: repeat(3, minmax(0,1fr));
    padding-left: 1rem;
  }

}

/* ---------- โหมดลดการเคลื่อนไหว ---------- */
@media (prefers-reduced-motion: reduce){
  .fw-card, .fw-card__img, .fw-btn, .fw-btn__icon, .fw-chip{ transition:none !important; }
}

/* ---------- รองรับสีเข้ม (ถ้าต้องการ) ---------- */
@media (prefers-color-scheme: dark){
  .fw-services{ background: linear-gradient(180deg, #0f1511, #111); }
  .fw-services::before{
    background:
      radial-gradient(36rem 18rem at -10% 30%, rgba(182,224,122,.18), transparent 60%),
      radial-gradient(32rem 16rem at 110% 70%, rgba(246,235,97,.16), transparent 60%);
  }
  :root{
    --fw-ink:#E7ECE6;
    --fw-muted:#ADB7AF;
    --fw-bg:#0f1511;
    --fw-line: rgba(182,224,122,.18);
  }
  .fw-card{
    background: linear-gradient(180deg, rgba(22,27,23,.7), rgba(22,27,23,.9));
    box-shadow: 0 10px 25px rgba(0,0,0,.35);
  }
  .fw-badge{
    color:#183220;
    background: linear-gradient(180deg, #e9f6e2, #dff1d7);
    border-color: rgba(255,255,255,.18);
  }
  .fw-btn{ color:#E7ECE6; }
  .fw-chip{ color:#E7ECE6; }
}
@media (min-width: 1000.98px) {
  .sec2-bg{
      background: url(../img/bg2.png);
      background-repeat: round;
    }
  }