/* Banner section styles */
.banner-text-color {
  color: #222;
}

/* About section styles */
.about-section-line {
  background: linear-gradient(
    90deg,
    #3b55a5,
    #4893cf,
    #68bd46,
    #5fbb46,
    #a5ce3b
  );
}

.about-section-text {
  background: linear-gradient(
    90deg,
    #3b55a5,
    #4893cf,
    #68bd46,
    #5fbb46,
    #a5ce3b
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-section-description {
  color: #222;
}

/* Process section styles */
.process-text {
  margin-right: 15px;
  color: #222;
}

/* Case studies section styles */
.case-studies-title {
  cursor: pointer;
}

/* JRRPedia section styles */
.jrrpedia-title {
  cursor: pointer;
}

/* An inside section styles */
.an-inside-text {
  text-decoration: none;
  color: inherit;
}

.an-inside-description {
  color: #222;
}

/* Button styles */
.gradient-button {
  background: linear-gradient(
    45deg,
    #3b55a5,
    #4893cf,
    #68bd46,
    #5fbb46,
    #a5ce3b
  );
}

.bg-gray {
  background-color: #1e1d1d;
  color: #ffffff;
}

/* Loading state styles */
#product-container-home.loading {
  opacity: 0.5;
  pointer-events: none;
}

#product-container-home.loading .grid-item {
  opacity: 0.3;
}

/* Ensure grid items are visible */
#product-container-home .grid-item {
  opacity: 1;
  visibility: visible;
  display: block;
}

/* Force visibility for portfolio items */
.portfolio-attractive .grid-item {
  display: block !important;
  visibility: visible !important;
}

/* Filter navigation styles for two rows */
.portfolio-filter.nav.nav-tabs {
  flex-wrap: wrap !important;
  gap: 8px;
}

.portfolio-filter .nav a.px-15px {
  padding-left: 12px !important;
  padding-right: 12px !important;
  white-space: nowrap;
}

.portfolio-filter .nav a.py-5px {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .portfolio-filter {
    justify-content: flex-start !important;
  }

  .portfolio-filter .nav a {
    font-size: 13px;
    padding: 6px 10px !important;
  }
}

@media (max-width: 576px) {
  .portfolio-filter .nav a {
    font-size: 12px;
    padding: 5px 8px !important;
  }
}
/* Responsive styles for client logo slider */
.clients-style-08 .swiper-slide img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
}

.client-logo-img {
  max-width: 100%;
  max-height: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}

@media (max-width: 992px) {
  .client-logo-img {
    max-height: 120px;
  }
}

@media (max-width: 768px) {
  .client-logo-img {
    max-height: 80px;
  }
}

@media (max-width: 576px) {
  .client-logo-img {
    max-height: 60px;
  }
}

.clients-style-08 {
  padding-left: 20px;
  padding-right: 20px;
}

.h-180px {
  height: 180px;
}
.xs-h-160px {
  height: 160px;
}

@media (max-width: 992px) {
  .h-180px {
    height: 120px;
  }
  .xs-h-160px {
    height: 100px;
  }
}

@media (max-width: 768px) {
  .clients-style-08 {
    padding-left: 5px;
    padding-right: 5px;
  }
  .h-180px {
    height: 80px;
  }
  .xs-h-160px {
    height: 60px;
  }
}

@media (max-width: 576px) {
  .clients-style-08 {
    padding-left: 0;
    padding-right: 0;
  }
  .h-180px {
    height: 50px;
  }
  .xs-h-160px {
    height: 40px;
  }
}

/* Responsive adjustments for extra small devices */
@media (max-width: 575px) {
  .banner-text-color {
    font-size: 0.9rem;
  }

  .btn.btn-lg {
    padding: 8px 16px;
    font-size: 0.9rem;
  }
}

/* Responsive adjustments for all screen sizes */

/* Responsive adjustments for swiper-pagination-wrapper */
/* Desktop (1024px - 1920px) */
@media (min-width: 1025px) and (max-width: 1920px) {
  .left-minus-45 {
    left: -630px !important;
  }
  .botton-40px {
    bottom: 0px !important;
  }
}

/* MacBook & Notebook (1280px - 1600px) */
@media (min-width: 1280px) and (max-width: 1600px) {
  .left-minus-45 {
    left: -530px !important;
  }
  .botton-40px {
    bottom: 0px !important;
  }
}

/* Tablet (600px - 1024px) */
/* @media (min-width: 600px) and (max-width: 1024px) {
  .left-minus-45{
    left: -45px !important;
  }
  .botton-40px{
    bottom: 40px !important;
  }
} */

/* Mobile (320px - 599px) */
/* @media (max-width: 599px) {
  .left-minus-45{
    left: -45px !important;
  }
  .botton-40px{
    bottom: 40px !important;
  }
} */

/* Responsive adjustments for all screen sizes */

/* Desktop (1024px - 1920px) */
@media (min-width: 1025px) and (max-width: 1920px) {
  /* ปรับแต่งสำหรับ Desktop ทั่วไป */
  .banner-text-color {
    /* ลบ font-size: 1rem; เพื่อไม่ลดขนาดตัวหนังสือ */
  }

  /* ป้องกันการตัดข้อความบนหน้าจอขนาดใหญ่ */
  .complete-section-title {
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
    max-width: 100%;
    width: 100%;
  }

  /* ป้องกันการตัดข้อความใน paragraph */
  .col-12.text-center p {
    white-space: normal;
    overflow: visible;
    max-width: 100%;
    width: 100%;
  }
}

/* MacBook & Notebook (1280px - 1600px) */
@media (min-width: 1280px) and (max-width: 1600px) {
  /* ปรับแต่งสำหรับ MacBook และ Notebook */
  .banner-text-color {
    /* ลบ font-size: 0.95rem; เพื่อไม่ลดขนาดตัวหนังสือ */
  }

  /* ทำให้ข้อความตัดลงมาเป็นหลายบรรทัดสำหรับ MacBook และ Notebook */
  .complete-section-title {
    white-space: normal;
    overflow: visible;
    word-wrap: break-word;
    hyphens: auto;
    text-overflow: initial;
    max-width: 100%;
    width: 100%;
    line-height: 1.4;
    /* ไม่กำหนด font-size เพื่อไม่ลดขนาดตัวหนังสือ */
  }

  .col-12.text-center p {
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.6;
  }
}

/* Tablet (600px - 1024px) */
@media (min-width: 600px) and (max-width: 1024px) {
  /* ปรับแต่งสำหรับ Tablet */
  .banner-text-color {
    /* ลบ font-size: 0.9rem; เพื่อไม่ลดขนาดตัวหนังสือ */
  }

  /* ปรับขนาดปุ่มสำหรับ Tablet */
  .sm-btn-md {
    padding: 10px 20px;
    font-size: 0.9rem;
  }

  /* ทำให้ข้อความตัดลงมาเป็นหลายบรรทัดสำหรับ Tablet */
  .complete-section-title {
    white-space: normal;
    overflow: visible;
    word-wrap: break-word;
    hyphens: auto;
    text-overflow: initial;
    max-width: 100%;
    width: 100%;
    line-height: 1.3;
    /* ลบ font-size: 1.8rem; เพื่อไม่ลดขนาดตัวหนังสือ */
  }

  .col-12.text-center p {
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.5;
  }
}

/* Mobile (320px - 599px) */
@media (max-width: 599px) {
  /* ปรับแต่งสำหรับ Mobile */
  .banner-text-color {
    /* ลบ font-size: 0.85rem; เพื่อไม่ลดขนาดตัวหนังสือ */
  }

  /* ปรับขนาดปุ่มสำหรับ Mobile */
  .xs-btn-sm {
    padding: 8px 16px;
    font-size: 0.8rem;
  }

  /* ปรับความสูงของ slider สำหรับ Mobile */
  .xs-h-350px {
    height: 350px !important;
  }

  /* ปรับระยะห่างสำหรับ Mobile */
  .xs-ps-15px {
    padding-left: 15px !important;
  }

  .xs-pe-15px {
    padding-right: 15px !important;
  }

  .xs-mb-20px {
    margin-bottom: 20px !important;
  }

  /* ทำให้ข้อความตัดลงมาเป็นหลายบรรทัดสำหรับ Mobile */
  .complete-section-title {
    white-space: normal;
    overflow: visible;
    word-wrap: break-word;
    hyphens: auto;
    text-overflow: initial;
    max-width: 100%;
    width: 100%;
    line-height: 1.2;
    /* ลบ font-size: 1.5rem; เพื่อไม่ลดขนาดตัวหนังสือ */
  }

  .col-12.text-center p {
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.4;
  }
}

/* Mobile ขนาดเล็ก (320px - 375px) */
@media (max-width: 375px) {
  .banner-text-color {
    /* ลบ font-size: 0.8rem; เพื่อไม่ลดขนาดตัวหนังสือ */
  }

  .xs-btn-sm {
    padding: 6px 12px;
    font-size: 0.75rem;
  }

  .xs-h-350px {
    height: 300px !important;
  }
}

/* MacBook & Notebook specific styles */
@media (min-width: 1280px) and (max-width: 1600px) {
  .macbook-notebook-padding {
    padding-top: 120px !important;
  }
}

/* ปรับแต่ง animation สำหรับ complete-section-title */
[data-anime] .complete-section-title.appear,
.complete-section-title[data-anime].appear {
  opacity: 1;
  white-space: nowrap;
  overflow: visible;
  width: auto;
  max-width: none;
  display: inline-block;
}
@media (max-width: 767px) {
  .complete-section-title {
    font-size: 40px !important;
  }
}